[Resolved] Navigation layout

Home Forums Support [Resolved] Navigation layout

Home Forums Support Navigation layout

  • This topic has 13 replies, 3 voices, and was last updated 2 years ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2050209
    Andy

    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.

    #2050442
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #2050948
    Andy

    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?

    #2051267
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #2051390
    Andy

    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.

    #2051433
    Ying
    Staff
    Customer Support

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

    #2051457
    Andy

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

    #2051462
    Ying
    Staff
    Customer Support

    You are welcome Andy πŸ™‚

    Glad to help!

    #2149280
    Andy

    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.

    #2149294
    David
    Staff
    Customer Support

    Hi there,

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

    #2149319
    Andy
    #2149345
    David
    Staff
    Customer Support

    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

    #2149349
    Andy

    Perfect! Thanks so much David!

    #2149361
    David
    Staff
    Customer Support

    You’re welcome

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.