This tutorial covers the details of implementing Split Navigation with menu items on logo’s left and right in Genesis in Gallery Pro.
We shall shrink the logo down upon scrolling down and on mobile widths, make it appear above the hamburger menu icon.
Step 1
Edit functions.php.
a) In
// Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 800,
'height' => 340,
'header-selector' => '.site-title a',
'header-text' => false,
'flex-height' => false,
) );change width and height to twice that of your logo's desired display size.
Ex.:
Thanks for this tutorial! I implemented it here – http://www.estahsumakeup.com/. Can I ask though, what workaround should I do if I want to link some of the menu items to homepage widgets, as in this case? If I use the correct url in the menu settings, the logo shows up in all of the menu tabs linked to front page widget areas.
Is your question this? How do I account for the fixed header and offset it so it doesn’t cover the in-page sections when jumped to?
Hi Sri! Thanks for replying. When I link one of the menu items to a homepage widget (e.g. http://url/#front-page-4), the logo shows up on that menu item, as well as in the middle one (so now there are 2 logos on the menu). Is there a simple way to avoid this, so that the logo only shows up on the center menu item?
I still don’t see/understand the problem. Do you mind sharing a screenshot? and to be clear, are we talking about desktops or on mobiles?
Hi Sri, you can take a look at my staging site here – http://testsite.fancygirldesignstudio.com/. The first menu item links to http://testsite.fancygirldesignstudio.com/#front-page-2. The logo appears on the menu item instead of the text.
Hi Patricia,
I see the problem now.
To get around this, what you could do is pull down Screen Options when you are editing the custom menu and enable CSS Classes. Then specify a custom class for your main home menu item, like
home-item. Then replace all instances ofmenu-item-homewithhome-itemin the code.Thanks so much! It worked perfectly!