Archived topic
Navigation as header, logo shift and smaller size, box-sizing
3 replies · Started by Deborah on June 16, 2021
I'm using navigation as header. Added CSS for the logo height, but the logo displays shifted to the left and the logo width is shrunk.
When I add CSS for the logo width, the logo displays distorted.
I noticed there is CSS added to the logo, that I have not added (not sure where transition is set?):
.navigation-branding img, .site-logo.mobile-header-logo img {
position: relative;
vertical-align: middle;
padding: 10px 0;
display: block;
box-sizing: border-box;
transition: height .3s ease;
}when I remove box-sizing (in the Inspector) from the code above, the logo displays at the correct size.
But the logo still remains shifted to the left. (The logo should left-align with the page title underneath the logo.)
If I don't use navigation as header, and float the navigation to the right of the logo, the logo displays correctly and aligns with the title on the left.
Any idea why the logo is distorted and shifted to the left?
Hi Deborah,
That CSS is coming from the default CSS that comes from GP Premium.
But we can override that by adding a CSS of the same selector on Appearance > Customize > Additional CSS.
Example:
.navigation-branding img, .site-logo.mobile-header-logo img {
box-sizing: unset;
}As for the logo shifting to the left. Can you explain a bit more on what you're trying to achieve layout-wise?
Perhaps provide a mockup image of how you're trying to lay it out? Let us know. :D
Thank you for the info. I'm using Simple CSS so I can add new CSS there.
I've included the screenshot of the alignment I'm trying to achieve (when I use float right and don't use navigation as a header). There is no shift to the left of the header. It aligns as I expect.
The shift to left of the header occurs when I enable "navigation as header" - I make no other change.
Elvin, what are the benefits/issues of using float left vs navigation as a header?
I watched the GeneratePress header and navigations options YouTube video, but I didn't hear why you would use one over the other. The display seems similar to me.
Hi Deborah,
When you are using Floats structure, and NOT using navigation as header, the logo and the navigation are hard to vertically aligned center.
If you are ok with it, then there's no need to use navigation as a header.
If you switch to Flexbox structure, then there's not much difference between use or not use navigation as header.
Hope that's helpful :)
