Archived topic

Navigation Logo Position Issue when docked or in mobile

9 replies · Started by Derek on May 31, 2018

Viewing posts 1–10 of 10

May 31, 2018 at 11:41 pm #589293

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;
}

June 1, 2018 at 5:47 am #589448

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.

June 2, 2018 at 5:45 pm #590451

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.

June 2, 2018 at 7:54 pm #590483

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.

June 4, 2018 at 10:40 pm #592058

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!

June 5, 2018 at 8:53 am #592448

Try adding this CSS:

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

June 5, 2018 at 5:59 pm #592745

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!

June 5, 2018 at 8:58 pm #592785

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

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

June 6, 2018 at 3:06 am #592929

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

June 6, 2018 at 4:29 am #592972

No problem :)

This archived topic is closed to new replies.

Start building better websites today.