[Resolved] Header/Nav Layout Changes

[AJ]

I’m working on a site and I’d like to use the GP header for most cases since the Elementor header isn’t very responsive, in my opinion.

Is there a way for me to set up the GP header so that it’s similar to this header → https://flwaterdamagerestoration.com/ with the CTA button on the right? Check out the mobile version too.

Thanks again!

[Tom]

I would:

1. Set up my navigation as the header: https://docs.generatepress.com/article/navigation-as-a-header/
2. Add a button to my navigation: https://docs.generatepress.com/article/adding-buttons-navigation/

To add it to mobile, I would:

1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to inside_navigation
3. Add this as your content:

<div class="mobile-bar-items">
    <a class="button your-button-class" href="URL TO YOUR BUTTON">Your button text</a>
</div>

Let me know if you need more info 🙂

[AJ]

Thanks, Tom.

Works like a charm on desktop. Played around with the CSS a bit to get it where I wanted on desktop. However, I’m having a little more trouble on mobile/tablet.

http://prntscr.com/nkdzre

I’d like to maybe increase the size/scale of the header on mobile a tad bit. Also, I know the logo isn’t super conducive for mobile, but it also seems to be misaligned from the left.

For reference, here’s the other one.

http://prntscr.com/nke0b7

Also, regarding toggling the mobile menu, how difficult would it be to set it up like the ERS one where it goes full screen?

Thanks again!

[Tom]

You can increase the height by increasing the menu item height on mobile: https://docs.generatepress.com/article/menu-item-height-width/

The logo looks like it might be a bug – I’ll look into it. Try adding this CSS for now:

@media (max-width: 768px) {
    .nav-aligned-center #site-navigation .navigation-branding,
    .nav-aligned-center #sticky-navigation .navigation-branding {
        margin-left: 0;
        margin-right: auto;
    }
}

[AJ]

This is how the mobile header/nav was at the default menu item height → http://prntscr.com/nkic7j

This is where I had it before, 50px → http://prntscr.com/nkichm

If I increase it anymore the menu items have way too much height on mobile.
From this at 50px → http://prntscr.com/nkichm
To this at 65px → http://prntscr.com/nkidg0

Is there a way to increase the padding(?) or height of the header/nav bar without increasing the individual menu item heights?

Also, the CSS for the logo worked, thanks for that!

[Tom]

I would increase the height using the option, then decrease the menu item height with some CSS:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        line-height: 50px;
    }
}

[AJ]

Perfect, that seems to work nicely. Added a bit of margin to .mobile-bar-items as well. Looks good.

Doing some testing and I’m not sure if the CSS code to fix the logo is working, but I could be wrong.

@media (max-width: 768px) {
    .nav-aligned-center #site-navigation .navigation-branding {
        margin-left: 0;
        margin-right: auto;
    }
}

Pixel 2XL. Looks good, this is what I’m aiming for → http://prntscr.com/nkpc8v
iPhone 6,7,8,X. Not so much → http://prntscr.com/nkpcim — Is there some CSS to make it all inline?

Here’s an iPad view as well. → http://prntscr.com/nkpd2k

[Tom]

Where did you add that CSS? I’m not seeing it on your site.

You might want to make sure there are no syntax errors in the CSS above it: https://jigsaw.w3.org/css-validator/

[AJ]

Should be there now. Was commenting it in and out testing. The issue still exists on my end.

Also checked the CSS validator, don’t see any syntax errors for the CSS we’ve added. At least from what I can tell.

[David]

Hi there,

i can’t see the CSS in the site? Did you add it to a child theme or Additional CSS? You may want to flush and disable the cache.

[AJ]

Added to the stylesheet in the child theme.

I’ve also purged the cache.

As I’m writing this I went ahead and added the CSS to the additional CSS section within the WordPress customization menu. Is that where we should be adding them? All the other CSS worked within the child theme stylesheet.

Thanks

[AJ]

I take that back, it works on the first load, but once I scroll the positions change.

[Tom]

Can you try the updated CSS here?: https://generatepress.com/forums/topic/header-nav-layout-changes/#post-889191

[AJ]

The updated code works like a charm. Thanks Tom.

[Tom]

You’re welcome 🙂

[Author]

Posts