Archived topic
Header with multiple rows on the right side
5 replies · Started by Joseph on November 1, 2021
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.
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. :D
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
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 :)
I figured it out so we're all good here. Thanks!
You are welcome :)
