Archived topic

Combining Hamburger and Standard Navigation

9 replies · Started by Andy on January 21, 2020

Viewing posts 1–10 of 10

January 21, 2020 at 7:48 am #1139293

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

January 21, 2020 at 8:34 am #1139351

Hi there,

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

January 21, 2020 at 8:39 am #1139361

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.

January 21, 2020 at 9:04 am #1139386

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.

January 21, 2020 at 9:43 am #1139426

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!.

January 21, 2020 at 9:54 am #1139434

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.

January 21, 2020 at 10:47 am #1139504

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?

January 21, 2020 at 12:02 pm #1139552

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

January 21, 2020 at 12:26 pm #1139571

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.

January 21, 2020 at 5:04 pm #1139762

You're welcome

This archived topic is closed to new replies.

Start building better websites today.