[Resolved] Sticky svg header logo too small

[Suzanne]

Hi, I am using an svg file for my logo. The logo is the correct size before scrolling, however when the sticky nav kicks in, the logo is very tiny. I’ve done so many modifications, I’m lost as to how to make the logo an appropriate size.

Here is the correct unscrolled logo view: Unscrolled Logo proper size

Here is the sticky scrolled logo view: Sticky small logo view

Here is a link to my site: My site

Thanks for your thoughts,
Suzanne

[Leo]

Hi there,

Can you try this? https://docs.generatepress.com/article/adding-svg-logo/

Let me know.

[Suzanne]

Hi,
I’ve added & activated the plugin, uploaded my logo via Customize > Site Identity, and set the size to the actual larger size in my css, and the logo is still very small.

any other ideas?

Thanks.

[Leo]

Ahh it’s getting overwritten. Try this:

.site-logo img {
    width: 312px !important;
    height: 90px !important;
}

[Suzanne]

It worked! Thank you! The logo is an appropriate size for sticky nav, however now the nav is not centered horizontally with the logo. The nav seems to be bumped up vertically aligning top?

How can I keep logo and nav bar centered on each other? updated site

[Leo]

I assume you meant centered vertically?

You can adjust the padding with the CSS you’ve already added:

.main-navigation {
   padding-top: 25px;
}

[Suzanne]

Yes, sorry, centered vertically.

I am having trouble determining which element to apply the padding for the sticky nav.

I have padding-top for the nav which affects the “non-sticky” state and displays as I would like , however when I scroll down and the sticky nav renders, the padding-top is not correct. THe padding is over the entire row (logo and nav), not just the nav.

Hope you can understand my description…

[Leo]

Ok let’s try changing your original code to this:

.main-navigation:not(.navigation-stick) {
    padding-top: 25px;
}

Then adjust the sticky navigation height in Customizer > Layout > Sticky Navigation > Menu Item height

[Suzanne]

Hi,
that actually didn’t work, but I figured it out. The class that should be adjusted is .main-nav not .main-navigation. As in:

.main-nav {
padding-top: 25px;
}

Thank you so much for the timely support.

[Leo]

Glad it’s working 🙂 You’re welcome!

[Suzanne]

Actually experiencing an additional problem with the sticky nav …

The dropdown nav in sticky state is now up too high/ overlapping the main nav text.
What should I adjust?

My site

[Leo]

Can you try my way here again? https://generatepress.com/forums/topic/sticky-svg-header-logo-too-small/#post-328980

Leave the code in so I can see why it isn’t working 🙂

[Suzanne]

Okay, I made the changes you suggested. Put in 75 for the height because it is still not pushing it down enough for my liking to be vertically centered.

Now the sticky nav dropdowns are now located way below the main nav text.

Seems to be a tradeoff of pushing the main nav down with the height adjustment vs the location of the dropdown nav.

Hmmm

[Leo]

Ok reduce the sticky navigation menu item height again, then try something like this:

.main-navigation.sticky-navigation-transition .main-nav > ul > li > a {
    padding-top: 25px;
}

by the way, looking at your current layout, this might also be a good option for you:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

[Suzanne]

Looks like it’s all working now! Thank you!

What is the benefit and/or difference using the “navigation as header option”?

Consequently, the client has changed their mind and now wants a third column in the header between the logo and the nav so I will be working on that next! Would the “navigation as header option” still be beneficial?

[Author]

Posts