[Resolved] Header Size issues

[Federico]

Dear Generatepress team,
I’m now working on the update of my web. This link (http://www.nonodake.com) it’s a test site I working on before updating my main web which I want to change from Genesis to Generatepress.
The problem I have is with the header and logo size, when desktop is all good and with mobile is also all good, but in the point break of tablet the header gets very small and strange for some reason. I would like to go from desktop to mobile without this strange header size change in between. If you go to http://www.nonodake.com and start making the browser smaller from desktop to mobile size you’ll see this smaller in between header size when it reaches tablet size. How can I change this and not having this in between header size? Or having it but without the size change on the header and logo.

Thank you for your help.

All the best,
Federico

[David]

Hi Federico,

there is this CSS:

@media (max-width: 768px)
.main-navigation .site-logo.navigation-logo img, .mobile-header-navigation .site-logo.mobile-header-logo img {
    height: 66px;
}

I can’t see where it is coming from as the autoptimize is on. If you want to disable that and delete the cache i can help.

[Federico]

Hi David,
Thank you for your replay. I just deactivated autoptimize. Please have a look.

Thank you!

Best,
F

[David]

OK, it just looks like a mobile padding issue. If you go to the Customiser > Layout > Container and increase the top padding on mobile to 70px. This will correct the problem. Let me know

[Federico]

Hi David,
I just changed the top padding on mobile. It didn’t fix the problem.

[David]

Hi there,

can you try this CSS:

.mobile-header-navigation .mobile-header-logo img {
    height: 66px;
}

[Federico]

It’s working but the search magnifying glass icon has a problem. During the tablet size it moves up like without padding. Please have look and see what I mean. Thank you.

[David]

Try:

.main-navigation .mobile-bar-items a {
line-height: 66px;
}

[Federico]

Hi David,
Thank you for your help. Now it’s working. One last question: Is it possible to keep the complete logo within the tablet size and switch to small logo only on mobile? so desktop and tablet would have complete logo and then mobile the small logo.

Thank you!

[Federico]

Hi David,
Please replay to my last question when you have some time. Thank you!

Best,
Federico

[David]

Hi Federico, apologies i am not sure how this one slipped through with no response.

In your simple CSS you have this @media( max-width: 1050px) { which is where you code is swapping the header over to mobile at a higher breakpoint.

Lets test the result by changing the max-width to 768px or a point where you think is more appropriate

[Federico]

Hi David,
Thank you for your replay. I made the change but if you have a look, you’ll see that when tablet size the logo goes to the left and the menu stays to the right. Is there a way to keep both in the middle? I think this way it would look much better and it would make more sense.

Thank you!

[David]

So for tablet (portrait) the Logo sits above the navigation?

[Federico]

Yes, I think that would be a solution. Logo above navigation and everything centered.

[David]

Ok, we could try a little flex box and see how that works out. Adjust your min/max widths to suit:

@media (max-width: 1024px) and (min-width: 768px) {
    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

[Author]

Posts