[Support request] Menu navigation

[Andy]

Hi, I’m trying to recreate the navigation menu found here. I’ve (sort of) replicated the layout using a primary and secondary navigation (and a mega menu), but I don’t think that’s the way it’s been done in the example and was wondering if the ‘generate_inside_navigation’ hook might be the answer or whether you can see a better way of doing it? I’m hoping to avoid using the top-bar and the secondary navigation if at all possible?

I’m also wondering how I would go about ensuring the ‘volunteer’ and ‘donate’ buttons remain visible as buttons (with their colours) on tablet and mobile view? And how I could add the overlay that appears below when you hover over the menu items?

Thanks

[David]

Hi there,

i would enable the Navigation as Header and the Mobile Header
https://docs.generatepress.com/article/navigation-as-a-header/
https://docs.generatepress.com/article/mobile-header/

Then create 2 hooks for your buttons.
For desktop: inside_navigation hook
For Mobile: inside_mobile_menu_bar hook

It will require a little CSS to re-order elements.

The site overlay on menu hover – will require some JS ….ill see if i can find something

[Andy]

Thanks David

It’s looking good on desktop, although I haven’t got it to work on mobile yet. I’ve added the hook, but cannot get the buttons to appear in mobile view.

I also had a bottom border on the Site Header to make a clear distinction between it and the page content which seems to have disappeared.

One last question, is it possible to put content on top of other content within a hook? In the example I sent, above the two buttons is a link to the contact page and a search function and I’m wondering if that can be achieved in the one hook?

If you’re able to find some JS for the overlay that would be amazing, thanks!

[David]

1. Aah the inside_mobile_menu_bar only exists if there is a menu bar item present such as the Search. Try the inside_mobile_header hook instead.

2. You’re border CSS would be this now:

.main-navigation.has-branding,
#mobile-header {
    border-bottom: 1px solid #ccc;
}

3. Yes, you could include whatever HTML you want in your hook element.
Simply add your <a> link for the contact before the button HTML. If need be i can help with some CSS to stack it over the two buttons.

[Andy]

Ah, that would explain it, I had disabled the search function. However, I’ve since tried both hooks (with and without search function enabled) and while the buttons are showing on mobile view, they’re not appearing inside the mobile menu – they’re dropping below the site title instead.

I’ve also added the <a> link for the contact link and added a class attribute but it’s just sitting to the left of the site title. I’ve added a float right element but it’s not moving. I think I will have to take you up on the offer of the CSS to stack it. Thanks!

[David]

This would be my HTML:

<div class="navigation-links">
    <!-- nav links and what not -->
    <a class="nav-link" href="#">Contact</a>
    <a class="nav-button" href="#">Button 1</a>
    <a class="nav-button-2" href="#">Button-2</a>
</div>

With this CSS:

.navigation-links {
    order: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-self: flex-start;
}
.navigation-links .nav-link {
    flex: 1 0 100%;
}

The nav as header uses Flexbox so the order: 20; value will move the entire element 20 places to the right. So there is no need to use floats on your nav-button.

[Andy]

Thanks David, this has been a huge help! However, to get the tablet and mobile view right I’ve had to use rather a lot of negative margins in the CSS and I’m not sure that’s the best way. And I’ve just realised if I set the order lower than 4 on mobile the buttons disappear and any higher than 4 the buttons drop into the menu itself. below Tablet view’s still not great either as button-2 is sitting on top of the menu and search icon. I’ve removed the dropdown arrows to gain more space but I guess I’ll need to use CSS to reduce the menu item width in tablet view. I was also wondering if the search function could be moved next to the ‘contact’ link instead (above the buttons)?

[Tom]

All that negative margin definitely shouldn’t be necessary. Any chance you can remove the extra CSS you’ve added so we can see what needs to be adjusted for it to work (without neg margins etc..)?

[Andy]

Yeah for sure. That should be back to as it was before I added the CSS. Thanks.

[Tom]

Tough one to look good on tablet/mobile, as there isn’t a lot of room.

First thing I would do is change the CSS to this:

.navigation-links {
    order: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.navigation-links .nav-link {
    flex-basis: 100%;
    text-align: right;
}

Then, add this:

@media (max-width: 1132px) {
    .main-navigation a {
        font-size: 15px;
    }

    .navigation-links {
        padding-right: 20px;
    }

    .menu-item-has-children .dropdown-menu-toggle {
        padding-right: 20px;
    }

    .main-navigation .main-nav ul li a {
        padding-left: 20px;
    }
}

@media (max-width: 920px) {
    .navigation-links {
        flex-grow: 1;
        justify-content: center;
        padding-right: 0;
        padding-bottom: 20px;
        margin-top: -20px;
    }

    .navigation-links .nav-link {
        text-align: center;
    }
}

As for mobile, change the CSS to this:

.navigation-links-2 {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.navigation-links-2 .nav-button, 
.navigation-links-2 .nav-button-2 {
    margin-top: 0;
}

[Andy]

Hi Tom, you’re right about it being tough to look good on tablet/mobile. It’s one of those where it looks simple enough, but turns out to be anything but! I made the changes you suggested though and it’s just about done it, thank you! On tablet view, the buttons were dropping below the other menu items, but I solved this by removing the dropdown menu arrows – not ideal, but it works. I’ll have to see if I can come up with something similar to the example site where the dropdowns are below rather than to the right instead. Not quite sure how to do that, but I’m sure I’ll figure it out. For a little extra room on mobile view, I can always look at moving the mobile menu label below the burger too.

I’m also looking at replicating the overlay that appears when hovering over a menu item to keep the focus on the active dropdown. David mentioned it may require some JS, but I came across these code snippets the other day and wondered if they would be a better alternative?

[Tom]

Hmm, not sure if that would work in this case. It would definitely be better to use javascript to add a class to the <body> element (or something similar). That way you could display/build the overlay.

[Andy]

Thanks Tom, good point. JS is definitely not my strong suit, but I like the site overlay on menu hover so I best get learning! I’ve seen another couple of tutorials (here and here), but just haven’t managed to implement them properly yet.

[David]

You can do a very basic version with some CSS and some jQuery.
First the CSS to create the overlay:

#page {
    position: relative;
}

#page:before {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    visibility: visible;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}
.nav-focus #page:before {
    opacity: 0.5;
}

Then the jQuery to toggle the nav-focus class

jQuery(document).ready(function($) {     
    $('.menu-item-has-children').hover(function(){     
        $('body').addClass('nav-focus');    
    },     
    function(){    
        $('body').removeClass('nav-focus');     
    });
});

[Andy]

Thanks David, that’s perfect for what I’m after! Again thank you to you and Tom – as always the support on here goes above and beyond!

[Author]

Posts