[Resolved] Navigation Logo Position Issue when docked or in mobile

[Derek]

Hi,

I’m using navigation as header and while my logo looks great in full screen, when I doc my screen some weird things happen such as the logo moving up and a weird up/down effect of the menu upon hover. If I enable the mobile header option, then my logo hover effect that I have set up doesn’t work. Is there a way to make this look good in mobile via css with the mobile header turned off?

Here is my current logo css:

.logo-hover-state {
      display: none;
}

.site-logo:hover .logo-regular-state {
      display: none;
}

.site-logo:hover .logo-hover-state {
      display: block;
}

.site-logo {
    float: left;
    padding-top: 13px;
    padding-right: 20px;
}

[David]

Hi Derek,

the little jump is happening due to the auto height of the regular logo.
If you set the .site-logo to a fixed height of 25px this should cure the problem.

[Derek]

Hi David,

The jump is fixed by adding the fixed height, but the logo is still not level with the menu. It gets pushed up to the top for some reason.

[Leo]

Weird. I thought this was working before?

Can you comment out your CSS and see if it goes back to normal?

It might help if you can disable the caching plugin as well so we can see the source of the code.

[Derek]

Well the formatting worked when I was using the mobile header, but I had to disable it to get the color change effect, see this thread:

https://generatepress.com/forums/topic/cant-disable-custom-header-for-pages/#post-587971

I tried disabling the css but that didn’t fix it. I’ve disabled my cache so you can take a look.

Thanks!

[Leo]

Try adding this CSS:

button.menu-toggle {
    width: auto;
    float: right;
}

[Derek]

Thank you very much Leo, it’s working just how I wanted it to now. All I need is to add some padding to the left margin but adding padding-left 13px; for example didn’t work. How can I make it so the logo isn’t flush to the left? For example like the mobile hamburger menu, is not flush to the right?

Thanks!

[Leo]

Hmm adding padding-left to this block of existing CSS should work:

.site-logo {
    float: left;
    padding-top: 13px;
    padding-right: 20px;
}

[Derek]

Oh ok I was just putting it in the wrong block. Finally I think this is done lol thank you for all the help!

[Leo]

No problem 🙂

[Author]

Posts