Menu Issues

Hi Team,

I try to do several customization’s to the menu hope you can help. I hope there are simple to answer.

The URL of the website is: http://babyuitzetzelfmaken.nl/

1: Have a link (inkijkexemplaar) to open in a new window.
2: The logo aligned to the left, and the text to the right.
3: On hover your demo has a colored underline, I would like that too. (the issue here is, that if I use # I get this underline effect, but it doesnt work on custom link to a download page.

4: The menu link Foto’s doesn’t scroll smoothly to the page content but goes there instantly.
5: Is it possible to have and a Logo Image and a Custom text next to it?

Hope to hear from you soon!

Cheers! tomasz

Dear Tomasz,

> 1

Please go to Appearance > Menus > expand the Screen Options (at the top right) > enable Link Target checkbox. Then edit the “inkijkexemplaar” menu item and enable “Open link in a new tab” option.

> 2

So you want the logo to always on the left even on mobile screen? Please advise.

> 3

As far as I know, the underline is only visible while the associated page is being viewed on the screen. There is no underline on hover state. Am I wrong? Please advise.

> 4

It happens due to invalid ID name you specified. Please use Fotos instead of Foto's.

> 5

Yes, it is possible.

Please add the following function into the child theme’s functions.php file:


function west_branding() {
	if ( get_theme_mod('site_logo') ) :
		echo '<a href="' . esc_url( home_url( '/' ) ) . '" title="' . esc_attr(get_bloginfo('name')) . '"><img class="site-logo" src="' . esc_url(get_theme_mod('site_logo')) . '" alt="' . esc_attr(get_bloginfo('name')) . '" /></a>'; 
		echo '<p>Your text goes here</p>';
	else :
		echo '<h1 class="site-title"><a href="' . esc_url( home_url( '/' ) ) . '" rel="home">' . esc_html(get_bloginfo('name')) . '</a></h1>';
		if ( get_bloginfo( 'description' ) ) {
			echo '<h2 class="site-description">' . esc_html(get_bloginfo( 'description' )) . '</h2>';
		}
	endif;
}

Replace Your text goes here with your own.

You can use the Functionality plugin if you don’t want to create a child theme.

Regards,
Kharis

Hi Kharis,

Thank You very much for the fast support!

1: Fixed (Thank you)

2: (not Fixed) Logo always on the left, even in mobile plz.

3: Fixed, You are right it is not on hover, but when the associated page is viewed. I added a / before the menu title’s and it works now. (Thank you)

4: Fixed (Thank you)

5: (not fixed) But thx for the reminder though, I totally forgot the child theme here :wink: anyways i added the child theme now, and tried the code. Unfortunately the “Your text goes here” comes now below the logo and it doesn’t look even close to ok. No style at all. Is there a way to get this custom text to the right of the logo and have it vertically aligned to the middle of the row? And add the font familiy (open Sans) and size 16px i am using for the rest of the content?

Dear Tomasz,

> 2

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-width:600px){
  
  .site-branding.col-xs-12{
    width: 50%;
    float: left;
    text-align: left;
  }
  
  .mobile-nav{
    text-align: right;
    width: 50%;
    float: right;
  }
  
  .slicknav_btn{
    float: right;
  }
  
  ul.slicknav_nav{
    top: 70px;
  }
  
}

> 5

Use this function, please:


function west_branding() {
	if ( get_theme_mod('site_logo') ) :
		echo '<div class="site-branding-inner">';
		echo '<a href="' . esc_url( home_url( '/' ) ) . '" title="' . esc_attr(get_bloginfo('name')) . '"><img class="site-logo" src="' . esc_url(get_theme_mod('site_logo')) . '" alt="' . esc_attr(get_bloginfo('name')) . '" /></a>';
		echo '<p>Your text goes here</p>';
		echo '</div>';
	else :
		echo '<h1 class="site-title"><a href="' . esc_url( home_url( '/' ) ) . '" rel="home">' . esc_html(get_bloginfo('name')) . '</a></h1>';
		if ( get_bloginfo( 'description' ) ) {
			echo '<h2 class="site-description">' . esc_html(get_bloginfo( 'description' )) . '</h2>';
		}
	endif;
}

and add the following custom CSS code to inline the logo and the text:


.site-branding-inner > a{
  float: left;  
} 

.site-branding-inner > p{
  line-height: 100px;
  margin-bottom: 0;
}  

Regards,
Kharis

Thanks a lot!