[Resolved] Combining Hamburger and Standard Navigation

[Andy]

Hi,
I’m looking to create quite a complex menu layout. I need to combine both the standard menu and hamburger menu from 768px and below. However, I only want to show the current active page in the standard navigation part of the menu. I’ve created a second menu and added it to the off-canvas overlay panel which works great for the hamburger menu.

I’ve included 2 URLs in the field below, one for the current site in development and also an image showing the desired menu design.

Could you please let me know if this is even possible and the best way to go about it. I’m comfortable using CSS, PHP filters and the Elements feature if required.

Thanks,

Andy

[David]

Hi there,

can’t see the links for the site? The field may of rejected them if you added both.

[Andy]

I’ve edited the field and just entered the image URL, you can then just go to the root domain to see the site itself. The Transport & Logistics page has been built.

[David]

Can be done with some CSS … something like this:

@media (max-width: 1000px) {
    .main-navigation .main-nav ul {
        display: block;
    }
    .main-navigation .main-nav ul li:not(.current-menu-item) {
        display: none;
    }
    .main-navigation:not(.slideout-navigation) .main-nav {
        order: 2;
        flex: 0 !important;
    }
}

But because of the line breaks in the menu item text it causes all sorts of pain.

The alternative would be to use the inside_navigation hook with some PHP to get the title:

<?php 
$the_title = get_the_title();

if ( $the_title ) {
	echo '<div class="mobile-current-page">' . $the_title . '</div>';
}
?>

Then you can style it using the applied class mobile-current-page to hide it on desktop and position etc. Happy to help if needed.

[Andy]

Thanks David I’ve used the Hook method and it works great!. Just had to tweak the flex order for the logo. Just to add to the complexity further, the design ideally requires each page to have a different hover/current menu color. This would need to work on desktop and the custom menu I’ve just created.

I’m thinking I could just use the page id in the body class, but is there a better solution?.

Many thanks again!.

[David]

If the color styles has to apply to your ‘mobile nav title’ then the page-id is probably the simplest and most joined up method.

[Andy]

Hi David,
Thanks, I’m trying to change the Environmental current and hover state to green. If you click on that page the menus current colour is changing correctly. However, I can’t get the hover state to change to the green. It flickers for a split second, but is then overridden by the customizer’s styling.

Any ideas?

[David]

The styles from the customizer are applied to the <a> element.
So you need to target that eg.

.main-navigation .main-nav ul li.enviro-nav:hover > a

[Andy]

Superb, thank you, I was trying to use the Force State option in the Browser inspector but it wasn’t showing anything for the a tag.

[David]

You’re welcome

[Author]

Posts