Archived topic

Mobile header height

7 replies · Started by Gabriela on November 19, 2020

Viewing posts 1–8 of 8

November 19, 2020 at 8:32 pm #1538401

Hi,
I’m working on a child theme from GeneratePress. I have written some CSS for parameters I could’t change in Customizer. But there’s some I can’t control.

Please look at this page https://danielaschneider.com.br/portfolio/artur-alvim/ in tablet and mobile versions.
I can’t realize why the header height remains so tall. I see at inspector that there’s a mobile-menu in html that should’t be there, since in mobile versions I am using off-canvas overlay menu.
Also in tablet version, there is a header height too tall (with mobile-menu selectors in html) and also the left sidebar (which in desktop view contains the menu), and also inspecting there I find the site-navigation selectors. Those to areas with menu selectors shouldn’t be there.

In Customizer, many controls don’t respond, in tablet and mobile modes, like padding, margin, and many others.

November 20, 2020 at 5:20 am #1538775

Hi there,

do you have an mockup image of what you're trying to achieve for the different device sizes ? It will help us understand what the best way forward is.

November 20, 2020 at 8:38 am #1539172

Hi David,
The central drawback is that I cannot control the mobile and tablet header height, and the presence of the left sidebar!

I guess I have too many breakpoint controls to manage... (Customizer, GenerateBlock container, SmartSlider, media, and maybe others).

November 20, 2020 at 2:30 pm #1539479

Hi there,

Your screenshots don't seem to be working.

However, you have this custom CSS added to your site:

.main-navigation .main-nav {
    margin-top: 8em;
    padding: 0 64px;
    width: 320px;
}

That's why it's so tall on mobile.

Try replacing it with this:

@media (min-width: 1024px) {
    .main-navigation .main-nav {
        margin-top: 8em;
        padding: 0 64px;
        width: 320px;
    }
}

November 20, 2020 at 4:35 pm #1539553

Hi Tom,
Great! That solved the problem of header too tall.

Sorry for the links not working. I have fixed them below. Can you please help me about the presence of left sidebar in tablet version (when hamburger is already displaying)?

In Customizer you can define mobile menu breakpoint, but where do I define tablet breakpoint? In Customizer, many settings for tablet don’t work, don’t make difference, or you can’t set – is it so or am I missing something?

In GenerateBlock container block you can define Desktop, Tablet and Mobile. How do I set tablet layout breakpoint globally, so that I can view the settings I made in GenerateBlocks container block?

https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_desired-tablet-layout.png
https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_tablet.png
https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/4-Artur_Alvim_-_Daniela_Schneider_mixed-breakpoints.png

November 21, 2020 at 10:54 am #1540333

To ditch the left sidebar as a specific breakpoint, you'd need to do this:

@media (max-width: 1280px) {
    .site-content .content-area {
        width: 100%;
    }

    .is-left-sidebar {
        display: none;
    }
}

You just need to match that breakpoint with the mobile menu breakpoint value.

Let me know if that does it or not :)

November 21, 2020 at 11:58 am #1540393

Hi!
Perfect! Thank you!

November 22, 2020 at 12:04 pm #1541427

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.