[Resolved] Header with multiple rows on the right side

[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.

[Elvin]

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. 😀

[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

[Ying]

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 🙂

[Joseph]

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

[Ying]

You are welcome 🙂

[Author]

Posts