- This topic has 13 replies, 3 voices, and was last updated 2 years ago by David.
-
AuthorPosts
-
December 15, 2021 at 9:28 am #2050209Andy
Hi there, I’ve been trying to replicate the navigation layout as seen here.I’ve enabled the navigation as header option, centred the logo as per your documentation, added 2 Elements to hook in the social media icons and the CTA button and added a secondary menu. I’m not too far off (and it needs tidying up) but was wondering if there’s a better way to do this? Ideally, I’d also like to have both menus sticky as well, but haven’t quite figured out the CSS for this yet. Any help with this would be much appreciated, thanks.
December 15, 2021 at 2:47 pm #2050442YingStaffCustomer SupportHi 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 π
December 16, 2021 at 7:14 am #2050948AndyHi 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?
December 16, 2021 at 10:09 am #2051267YingStaffCustomer SupportThe 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 using
full width
navigation, so there’ll be more space for the menu items, you can do so atcustomizer > layout > primary navigation
, setNavigation Width
&Inner Navigation Width
both toFull
.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 π
December 16, 2021 at 1:59 pm #2051390AndyAh, 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.
December 16, 2021 at 2:52 pm #2051433YingStaffCustomer SupportI updated the CSS to includes the mobile header as well: https://generatepress.com/forums/topic/navigation-layout/#post-2051267 π
December 16, 2021 at 3:22 pm #2051457AndyFantastic! I couldn’t quite get it figured out, but that’s sorted it – thanks so much! Really appreciate the awesome help as always.
December 16, 2021 at 3:26 pm #2051462YingStaffCustomer SupportYou are welcome Andy π
Glad to help!
March 10, 2022 at 4:31 am #2149280AndyHi, 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.
March 10, 2022 at 4:43 am #2149294DavidStaffCustomer SupportHi there,
can you share a link to your site where I can see this? ( links get removed when a topic is resolved )
March 10, 2022 at 5:07 am #2149319March 10, 2022 at 5:41 am #2149345DavidStaffCustomer SupportTry 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
March 10, 2022 at 5:49 am #2149349AndyPerfect! Thanks so much David!
March 10, 2022 at 6:00 am #2149361DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.