[Resolved] Menu and header sizes differ on different devices

Home Forums Support [Resolved] Menu and header sizes differ on different devices

Home Forums Support Menu and header sizes differ on different devices

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1445667
    André

    Hi,

    I set my layout to have only one breakpoint. That is triggered if the size of the screen gets smaller than the sum of the width of the logo and the menu. On my desktop browser, I lowered the width until the menu breaks into two rows. I noted the number (1036px) and set that as the breakpoint. That now works on desktop browsers. However, If I use a tablet, it still breaks the menu into two rows. My tablet has a screen resolution of 1112×834 (portrait mode is working fine) and an innerWidth of 980px. The curious part is that the logo shrinks on a tablet landscape mode, so both the logo and the menu should fit easily, but the menu always breaks into two lines. What setting or CSS do I need to tweak?

    My second part of the question is related. The logo fits perfectly with its left padding on the desktop. But on mobiles, the left padding is smaller than it should be. It should be inline with all the other paddings on the page. But on mobile (phones and tablets), it is still some pixels far to the left. How can I correct this?

    And the third question, which is also related, is, how can I set the font-size for the header search on mobile. If I check in the customizer, it looks perfectly fine for desktop, tablet, and mobile. But if I use a real mobile or tablet, the font is larger than the form field. What is the CSS for the mobile search form field?

    Why is the website looking different on a real mobile device and the customizer emulating the devices?

    Thanks!

    #1446403
    Leo
    Staff
    Customer Support

    Hi there,

    Let’s try to tackle one thing at the time.

    What kind of tablet are you using? I tried the Chrome simulator with iPad Pro and it seems to work correctly:
    https://www.screencast.com/t/V8RCa7vp

    What if you increase the breakpoint higher like 1080px or 1100px?

    Can you also clear and disable your caching plugin to make sure nothing is interfering?

    Let me know 🙂

    #1446781
    André

    Hi Leo,

    Okay, it seems there is still a difference between a real device and a simulated device. I switched off all caches so I can see the real-time effects of changes. I use FlyingPress. When I deactivate this plugin, everything looks okay and as soon as I activate it – even with all settings turned off – the simulated device still looks fine, but the hardware device (iPad Pro 10,5) breaks the header into two lines. I will tackle this with the Plugin author and will keep the plugin deactivated for the time being.

    How about the other two issues with the header?

    Thanks!

    #1447331
    Leo
    Staff
    Customer Support

    Try this CSS for the second question:

    @media (max-width: 1210px) {
        #site-navigation .navigation-branding, 
        #sticky-navigation .navigation-branding {
            margin-left: 20px;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1447688
    André

    Cool, that’s looking good now. Now we need to fix the font for the menu search on mobiles.

    #1447744
    Leo
    Staff
    Customer Support

    I’m seeing this CSS you’ve added:

    .navigation-search input[type="search"] {
    	font-size: 40px;
    	font-weight: 900;
    }

    Maybe try making it desktop only?

    @media (min-width: 769px) {
        .navigation-search input[type="search"] {
    	font-size: 40px;
    	font-weight: 900;
        }
    }

    More info: https://docs.generatepress.com/article/responsive-display/

    #1448148
    André

    Thank you. I moved only the 40px part in the media query. This looks better because the font-weight will stay consistent. Now I need to get the media queries straight. I will experiment with different settings.

    Meanwhile, I also added an additional menu in the mobile header. With your explanation, I was able to fix the logo in the mobile header on my own.

    Thanks again, good job!

    #1448906
    Leo
    Staff
    Customer Support

    No problem 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.