[Resolved] Header layout issues

[paddyd]

Another Thesis->GeneratePress redo:

https://knowlesplumbing.com/test1/

1. Would like top of menu to line up with top of logo in desktop view. (or at least be able to see whether I like it better than what is there now) Nothing I’ve tried so far has done that; have fiddled with logo size, menu height, adding padding/margin – doesn’t budge. And yes, have flex enabled. I have two hook elements in the header (phone number and social icons) so can’t use navigation as header, and can’t make the logo any smaller.
2. The social icons vanish entirely in both mobile views. This isn’t a deal-breaker; I can add them to the footer – just wondered why they don’t show up when the phone number does…(there is room for them in tablet view)

[Ying]

1. Try this CSS, feel free to adjust the margin-top value set for the phone number and social icons.

@media (min-width: 1191px) {
     .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-item > a {
        line-height: 1em;
    }
     .main-navigation .main-nav>ul, .inside-header.grid-container {
        align-items: flex-start;
    }
     .inside-header .phone-no, .social-icons-header {
        margin-top: 50px !important;
    }
}

You can adjust logo size at customizer > site identity.

2. GP hides all ul element under navigation on mobile, so it hides the social icons as well.

Try add this CSS:

@media (max-width: 1190px) {
    .main-navigation ul.wp-block-social-links.social-icons-header {
        display: flex;
    }
}

[paddyd]

Well…re: issue #1, the top of the menu is still centred vertically and not lined up with the top of the logo – it didn’t move at all. All that happens is the icons and phone number get bumped way down. I reduced the margin to 0 and that moved them up, but that just leaves everything where it was before I added the new bit of CSS.

And as you can see – once I add the CSS for the social icons, it looks ok on tablet (but for some reason, loses the padding on the right side of the phone number in tablet view, mashing it right up to the icons) but screws up the phone view; the phone number appears opposite the logo, with the social icons and the menu BELOW. So I may adjust the @media to have a minimum as well as a max to remove that bit of CSS for phones, or just leave it out altogether and put the social icons in the footer. Anyway – thought you should see what it looks like at least. :p

[Ying]

Let’s handle one question at a time.

Isn’t this what you are seeing on desktop? The menu looks aligning well with top of the logo to me.
https://www.screencast.com/t/6znQARb9x25

The padding for the phone number is added using this CSS which only adds padding when screen is wider than 1191px, so I think you need to adjust the media query in your CSS.

@media (min-width: 1191px){
.phone-no {
	padding-right: 20px;

	}

[paddyd]

Ack – browser caches got the better of me, I think! #1 issue is now solved.

#2 is more or less resolved – made the break point 800px so don’t have an issue with the phone number padding and the social icons don’t appear in the header on the phone view. Will put them in the footer as well anyway.

The phone view is now logo – phone number – menu in a row. Is there any way to easily put the phone number below the menu, aligned left, with the menu aligning with the top of the logo in both mobile views? Just in case the client wants it that way. (tried removing the @media query, but that didn’t work)

[David]

Hi there.

so – if i understand correctly, this CSS will position the Phone below the Menu Hamburger:

@media(max-width: 768px) {
    #mobile-header .inside-navigation {
        align-items: flex-start;
        position: relative;
    }
    #mobile-header .inside-navigation  .menu-toggle {
        line-height: 50px;
    }
    .phone-no {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
}

If thats correct, i personally would avoid doing it as thicker fingered people may find themselves clicking the phone number when they want to open the menu and vice versa

[paddyd]

Good point, David – hadn’t thought of that! I’m actually fine with it as is, so won’t change the CSS. Actually may increase the size of that hamburger menu icon…it’s not big. Found the CSS to do that here: https://generatepress.com/forums/topic/hamburger-menu-icon-will-not-increase-in-size/
Would likely have to turn the phone number into an icon though, if I do that, due to lack of room. :p

Thanks, as always, for your stellar support! 🙂

[David]

Glad we could be of help!

[Author]

Posts