Navigation layout

Hi Andy,

Try change the social icons element hook to generate_menu_bar_items as well as the CTA button.

Then add this CSS:

.menu-bar-items {
    width: 100%;
    justify-content: space-between;
}

Let me know if this helps :)

Hi Ying, yes that was a big help. However, it made us realise that particular layout wasn't going to work for us. I'm going to make a note of that CSS though as it will definitely come in useful for another website project I've got on the go - so a big thanks!

We've decided to stick with the centred logo and have the social icons element hook and the CTA button element hook after the menu, but as you'll see one of the menu items is behind the logo and I'm struggling to find a solution to fix that. There are a quite a few menu items so that doesn't help! 😄Any ideas would be greatly appreciated.

And secondly, the social media icons are white on the home page as this is a (transparent) merged header, but as the sticky menu and the navigation background for the global pages are (and need to be) white, the social icons drop out of sight. Would you know of a way to target these with CSS so they change colour on the sticky menu and global pages navigation background?

The CSS you have to position the logo to center has a small error which makes the logo not exactly in the center: https://www.screencast.com/t/TmoZvRqf

Change the transform: translateX(-100%); totransform: translateX(-50%);

I also would recommend usingfull width navigation, so there'll be more space for the menu items, you can do so at customizer > layout > primary navigation, set Navigation Width & Inner Navigation Width both to Full.

For the social icons color, try this CSS:

#mobile-header .gb-button-wrapper.gb-button-wrapper-9854a3aa .gb-icon, #sticky-navigation .gb-button-wrapper.gb-button-wrapper-9854a3aa .gb-icon, body:not(.home) .main-navigation .gb-button-wrapper.gb-button-wrapper-9854a3aa .gb-icon {
    color: var(--persian-green);
}
#mobile-header .gb-button-wrapper.gb-button-wrapper-9854a3aa .gb-button:hover .gb-icon, #sticky-navigation .gb-button-wrapper.gb-button-wrapper-9854a3aa .gb-button:hover .gb-icon, body:not(.home) .main-navigation .gb-button-wrapper.gb-button-wrapper-9854a3aa .gb-button:hover .gb-icon {
    color: #ffffff !important;
}

Let me know :)

Ah, yes I was playing around with the CSS and forgot to change that back.The social icons colour works perfectly on desktop, but not on tablet or mobile view.

I updated the CSS to includes the mobile header as well: https://generatepress.com/forums/topic/navigation-layout/#post-2051267 :)

Fantastic! I couldn't quite get it figured out, but that's sorted it - thanks so much! Really appreciate the awesome help as always.

You are welcome Andy :)

Glad to help!

Hi, you very kindly helped me with the above CSS to change the colour of the social icons for the sticky menu and global pages navigation in tablet and mobile view. This works perfectly, but is there a way to target just the homepage so that on tablet and mobile view the icons are white as they are on desktop view? The homepage is a merged header and the CSS is changing the icons to green on tablet and mobile view. The sticky menu setting can stay the same (green icons on white background). Thanks.

Hi there,

can you share a link to your site where I can see this? ( links get removed when a topic is resolved )

https://wordpress-314150-2155244.cloudwaysapps.com/

Try adding this CSS:

.header-wrap #mobile-header:not(.is_stuck) .menu-bar-items a .gb-icon {
    color: #fff;
}

It should force the icons to be white on any page that has a merged header but only when the mobile-header is NOT sticky

Perfect! Thanks so much David!

You're welcome