During page loading the menu bar is “jumping”

I had to same problem.

For me the css code was enough.
You added javascript to the menu?

Nice theme setup btw.

Actually it looks like you just need to increase the CSS min-height recommendation I made in the other thread. Try this instead:

@media screen and (min-width: 480px) {
    .custom-header {
        min-height: 183px;
    }
}

I was writing about this right now, I’m having de same issue. I think it’s because of the .site-brading: { margin-bottom:70px;}

but I don’t how to solve this.

my site: francielledias.com

I’m noticing that not everyone has the same height for their header so the precise value I recommend (here I recommend 183px) may change depending the website.

but i’m not using a header image, I just had put the logo in center. And I didn’t change the header css, except for the background-color.

@franmattos, In your case the header height is ‘253px’.

Hi all
Thanks for you replies, how did you find the right value for min-height?
thanks

By using a browser developer tool like the one that’s built into Chrome. Right click on the header image/ area you’re trying to find the height and then press “Inspect element”. You’ll see a toolbar appear with HTML on the left and CSS on the right. Hover your mouse over the selected bit of HTML (highlighted in blue) and you’ll see the dimensions being displayed on the page.

I just put the code

@media screen and (min-width: 480px) {
    .custom-header {
        min-height: 253px;
    }
}

but the issue still

@pako69 this code solved your problem?

@anevins

That’s what I did and found 183px:

@media screen and (min-width: 480px) {
    .custom-header {
        min-height: 183px;
    }
}

This did not solve the issue BUT I found that an extra margin is added inline like this:
<div class="custom-header" style="margin-bottom:72px">

So what I did is this:

@media screen and (min-width: 480px) {
    .custom-header {
        min-height: 183px;
        margin-bottom: 72px !important;
    }
}

and YES it works now ??

I have the same issue again. Setting the min-height doesn’t seem to do the job anymore.

I am working with chrome and had to delete cache frequently to see the effect of the changes i made.

Firefox doesn’t have the issue btw.

@franmattos

Try this (70px and 253px are the valuex I found looking at your site):

@media screen and (min-width: 480px) {
    .custom-header {
        min-height: 253px;
        margin-bottom: 70px !important;
    }
}

@pako69, I don’t think you want to be applying the margin bottom styles. This thread is getting a bit messy and difficult to support. I’d like to just focus on your site @pako69 for my own sanity. If the issue is resolved for you then it should be resolved for everyone else.

@pako69, The reason that margin-bottom style is added through JavaScript is so that it can be dynamic to the website header options and the user’s screen settings.

For me works too ??

I’ve made the same as you did:

@media screen and (min-width: 480px) {
    .custom-header {
        min-height: 253px;
        margin-bottom: 70px !important;
    }
}

I knew that the margin-bottom was a problem too… thank you @anevins and @pako69