[Resolved] Navigation layout

Home Forums Support [Resolved] Navigation layout

Home Forums Support Navigation layout

  • This topic has 7 replies, 2 voices, and was last updated 1 month ago by Ying.
Viewing 8 posts - 1 through 8 (of 8 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!

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