🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Combining Hamburger and Standard Navigation

Home Forums Support Combining Hamburger and Standard Navigation

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1139293
    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

    #1139351
    David
    Staff
    Customer Support

    Hi there,

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

    #1139361
    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.

    #1139386
    David
    Staff
    Customer Support

    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.

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

    #1139434
    David
    Staff
    Customer Support

    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.

    #1139504
    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?

    #1139552
    David
    Staff
    Customer Support

    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

    #1139571
    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.

    #1139762
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.