Wikzo's Replies | ww.wp.xz.cn

Forum Replies Created

Viewing 11 replies - 1 through 11 (of 11 total)

Forum: Themes and Templates
In reply to: [Getwid Base] Display logo/header and menu centered on two different lines

Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago

Thanks, it works!

I’ve submitted a review for the theme (I haven’t really used the plugin yet). Thanks for everything!

Forum: Themes and Templates
In reply to: [Getwid Base] Removing search icon from header?

Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago

Thanks. Maybe add some options to show different icons, e.g. social media icons such as Facebook, Twitter, Instagram, etc.

Forum: Themes and Templates
In reply to: [Getwid Base] Make menu item look like a button?

Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago

Thanks, it works!

I actually don’t know what !important does specifically. It was just something I found other people using.

Forum: Themes and Templates
In reply to: [Getwid Base] Display logo/header and menu centered on two different lines

Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago

The reason I want to have header and menus on separate lines is because I have quite a few pages and I would like to show them all. If the screen width is not big enough, the last menu item(s) gets truncated in the right side.

Alternatively, is it possible to decrease the spacing/margin between header and menus to avoid truncating the last menu item?

See screenshot:

View post on imgur.com

Forum: Themes and Templates
In reply to: [Getwid Base] Display logo/header and menu centered on two different lines
Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago
@dimned That’s strange. Thanks for looking into it, but I haven’t modified anything and I don’t think it’s my plugins. I do use a plugin to make a full-width page template, but I just tried disabling all my plugins and it didn’t make any difference.

My plugins:
```
Fullwidth Page Templates
GA Google Analytics
Getwid
Google Authenticator
Justified Image Grid
Really Simple SSL
Yoast SEO
```
My custom CSS:
```
/* https://ww.wp.xz.cn/support/topic/display-logo-header-and-menu-centered-on-two-different-lines/*/
@media (min-width:1024px){
 .site-header {
    display: flex;
    flex-direction: column;
    text-align: center;
}
}

/* https://ww.wp.xz.cn/support/topic/make-menu-item-look-like-a-button/*/
.contact-button{
	border-radius: 0px;
	background: #68c5f9;
	color: #fff;
}

.contact-button:hover{
	border-radius: 0px;
	background: #345975;
	color: #fff;
}

li.contact-button.current_page_item  a{
 color:#fff;
}

.search-toggle {
	display: none;
}

.mobile-search-form-wrapper {
	display: none;
}
```
I haven’t modified header.php, but here it is:
```
<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.ww.wp.xz.cn/themes/basics/template-files/#template-partials
 *
 * @package getwid_base
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php
if ( function_exists( 'wp_body_open' ) ) {
	wp_body_open();
}
?>
<div id="page" class="site">

	<div class="search-modal" id="search-modal">
		<button class="close-search-modal" id="close-search-modal">
			<span class="lnr lnr-cross"></span>
		</button>
		<div class="search-form-wrapper">
			<?php
			get_search_form();
			?>
		</div>
	</div>

	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'getwid-base' ); ?></a>

	<?php
	$header_classes = apply_filters( 'getwid_base_header_classes', array( 'site-header' ) )
	?>
	<header id="masthead" class="<?php echo esc_attr( implode( ' ', $header_classes ) ); ?>">
		<div class="site-branding">
			<?php
			the_custom_logo();
			if ( is_front_page() && is_home() ) :
				?>
				<h1 class="site-title">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<?php
			else :
				?>
				<p class="site-title">
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
			<?php
			endif;
			$getwid_base_description = get_bloginfo( 'description', 'display' );
			if ( $getwid_base_description || is_customize_preview() ) :
				?>
				<p class="site-description"><?php echo esc_html( $getwid_base_description ); /* WPCS: xss ok. */ ?></p>
			<?php endif; ?>
		</div>

		<div class="main-navigation-wrapper">
			<nav id="site-navigation" class="main-navigation">
				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
					<span class="lnr lnr-menu"></span> <span class="lnr lnr-cross"></span>
				</button>
				<div class="primary-menu-wrapper">
					<?php
					wp_nav_menu( array(
						'theme_location'  => 'menu-1',
						'menu_id'         => 'primary-menu',
						'menu_class'      => 'menu primary-menu',
						'container_class' => 'primary-menu-container'
					) );
					?>
					<div class="mobile-search-form-wrapper">
						<?php
						get_search_form();
						?>
					</div>
				</div>
			</nav>

			<button class="search-toggle" id="search-toggle">
				<span class="lnr lnr-magnifier"></span>
			</button>
			
		</div>
	</header>

	<div id="content" class="site-content">
```
- This reply was modified 6 years, 1 month ago by Wikzo.
- This reply was modified 6 years, 1 month ago by Wikzo.
- This reply was modified 6 years, 1 month ago by Wikzo.
Forum: Themes and Templates
In reply to: [Getwid Base] Make menu item look like a button?
Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago
@dimned I found a new problem: when the menu item is currently selected, the text color and button color are identical, so you cannot read the text.

I tried making a custom button, but I cannot change the text color when the item is selected.
```
.customButton{
	border-radius: 0px;
	background: #68c5f9;
	color: #fff; !important;
}

.customButton:hover{
	border-radius: 0px;
	background: #345975;
	color: #fff; !important;
}
```
Using the inspector in Firefox, you can see that it inherits the text color from .main-navigation .current-menu-item.

Screenshot example: https://imgur.com/gd7u3QO

How can I force the text ONLY FOR THE BUTTON to always be white?

I tried the following, but it makes both normal text menus and button menus white:
```
.current_page_item a, .customButton {
   color:#fff!important;
}
```
- This reply was modified 6 years, 1 month ago by Wikzo.
- This reply was modified 6 years, 1 month ago by Wikzo.
Forum: Themes and Templates
In reply to: [Getwid Base] Make menu item look like a button?
Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago
Update: I just overwrote the current button class and set its border-radius to 0px:
```
.button {
  border-radius: 0px;
}
```
Forum: Themes and Templates
In reply to: [Getwid Base] Display logo/header and menu centered on two different lines

Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago

Here’s my menu setup: https://imgur.com/cVCMaI7

Menu location: https://imgur.com/8bLsVzD

If you go to my website on desktop, you will see three dots instead of the menu.

Forum: Themes and Templates
In reply to: [Getwid Base] Removing search icon from header?
Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago
Update: I’m slowly starting to understand custom CSS.

I added the following and it seems to remove the search icon on both desktop and mobile:
```
.search-toggle {
	display: none;
}

.mobile-search-form-wrapper {
	display: none;
}
```
Forum: Themes and Templates
In reply to: [Getwid Base] Make menu item look like a button?
Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago
@dimned Thanks, that is what I needed! I just changed its color to blue instead of purple via Customize –> Colors –> Primary Color.

However, I would like to use normal corners instead of the default rounded corners + maybe make the overall button a bit smaller to make it align better with the other menu items.

How do I add a custom button class and what should I write in it to have things like default except the rounded corners?

Yes, of course I will rate the theme 🙂
- This reply was modified 6 years, 1 month ago by Wikzo.
Forum: Themes and Templates
In reply to: [Getwid Base] Display logo/header and menu centered on two different lines
Thread Starter Wikzo
(@wikzo)

6 years, 1 month ago
@dimned Thank you, that works. However, there is one problem:

If I set menu location to “Primary”, on desktop it just shows three dots that you can hover over to see the menu. This defeats the purpose of the menu.

If I DON’T set the menu location to “Primary”, it works on desktop, but then the dropdown menu on mobile is just empty.

Here are some screenshots to show what I mean:

Primary enabled – desktop: https://imgur.com/oVk8n32

Primary disabled – mobile: https://imgur.com/IHWwleY

Primary disabled – desktop: https://imgur.com/49pamKh <—- this is what I want

Maybe it’s because I use a static front page?

PS. When the menu is not set to primary, then the blue “Contact” button doesn’t work, either (see https://ww.wp.xz.cn/support/topic/make-menu-item-look-like-a-button/).
- This reply was modified 6 years, 1 month ago by Wikzo.
- This reply was modified 6 years, 1 month ago by Wikzo.
- This reply was modified 6 years, 1 month ago by Wikzo.
- This reply was modified 6 years, 1 month ago by Wikzo.

Viewing 11 replies - 1 through 11 (of 11 total)