[Resolved] Header Size issues

Home Forums Support [Resolved] Header Size issues

Home Forums Support Header Size issues

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #619121
    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

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #619136
    David
    Staff
    Customer Support

    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.

    #619138
    Federico

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

    Thank you!

    Best,
    F

    #619143
    David
    Staff
    Customer Support

    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

    #619144
    Federico

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

    #619341
    David
    Staff
    Customer Support

    Hi there,

    can you try this CSS:

    .mobile-header-navigation .mobile-header-logo img {
        height: 66px;
    }
    #619355
    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.

    #619370
    David
    Staff
    Customer Support

    Try:

    .main-navigation .mobile-bar-items a {
    line-height: 66px;
    }
    #619375
    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!

    #622698
    Federico

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

    Best,
    Federico

    #622704
    David
    Staff
    Customer Support

    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

    #622706
    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!

    #622714
    David
    Staff
    Customer Support

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

    #622718
    Federico

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

    #622720
    David
    Staff
    Customer Support

    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;
        }
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.