[Resolved] Header with multiple rows on the right side

Home Forums Support [Resolved] Header with multiple rows on the right side

Home Forums Support Header with multiple rows on the right side

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1987486
    Joseph

    Easiest way to create a header like below? I want the logo to center and be as large as the two rows on the right. Topbar is not what I am looking for. I could use header block element but then I lose the sticky nav options that I want to keep. I’ve done an oversized logo and moved it up but it’s not real clean and alignment gets wonky at times.

    #1987547
    Elvin
    Staff
    Customer Support

    Hi Joseph,

    You can try inserting a “Phone number” button by creating it on a block element hooked to generate_inside_navigation.

    You then let us check the site after you’ve added it incase you prefer to adjust the alignment so we can advise you further on what next to do w/ it. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1988525
    Joseph

    Ok using those clues I got it as close as I could but the navigation will not float right.

    Also, I anticipate it needs to be adjusted for my sticky navigation as well.

    EDIT:
    Ok got it working okay by using these two:

    .phone-header {
        width: 100%;
        text-align: right;
    }
    
    #site-navigation.main-navigation .inside-navigation {justify-content: flex-end;}

    Now just need to figure out how to make it look nice on Sticky

    #1988663
    Ying
    Staff
    Customer Support

    Hi Joseph,

    Just to confirm that you want the phone button to show on sticky navigation as well?

    If so, try this CSS:

    @media (min-width: 1025px) {
    .navigation-stick .gb-container.phone-header.hide-on-sticky {
        display: block !important;
        width: auto;
    }
    
    #sticky-navigation .navigation-branding {
        flex-basis: 52px;
    }
    
    #sticky-navigation div#primary-menu {
        width: 100%;
        justify-content: flex-end;
        display: flex;
    }
    }

    Let me know πŸ™‚

    #1988823
    Joseph

    I figured it out so we’re all good here. Thanks!

    #1988837
    Ying
    Staff
    Customer Support

    You are welcome πŸ™‚

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