Large Space Above Header on Mobile

  • Resolved maybenot

    (@maybenot)


    4 years, 9 months ago

    Hi,

    I’ve read tons of info but still can’t figure out how to remove huge space above header on Mobile when scrolling down (it’s not the header itself).

    I want sticky menu on desktop but not on Mobile. Below works fine except for huge space above the header on Mobile when scrolling down.

    When I change position to fixed on Mobile, it looks perfect with no space but I want non sticky menu on mobile.

    /* sticky menu on desktop */
.site-header {
    position: fixed;
	top:0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 0 6px #eee8ff;
  }
/* not sticky menu on mobile */
@media (max-width: 768px) {
    .site-header {
        position: relative;
        top: auto;
	box-shadow: none;
    }
}

    I copied the below from support here and made Mobile menu in single line in case it helps you help me…

    /* mobile menu single line */
@media (max-width: 768px) {
    #masthead {
        text-align: left;
    }
    #masthead .menu-toggle {
        position: absolute;
        top: 7px;
        right: 0;
        width: auto;
    }
    .inside-header {
        position: relative;
        padding-left: 20px;
	margin-bottom:-20px;
    }
    .inside-navigation {
        position: static;
    }
}

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Leo

    (@leohsiang)

    Hi there,

    Can you link us to the page in question?

    Thanks ??

    Thread Starter maybenot

    (@maybenot)

    Thanks for your prompt response! ??

    Without posting my site, I hope the below basic setup helps you help me.

    Container – Width 1100px; One Container; Boxes (Alignment)
    Header – Current; Full (Header Width); Contained (Inner Header Width); Left (Alignment)
    Primary Navigation – Full; Contained; Left; Float Right

    Ignoring all the codes above, please tell me how to:
    1. make logo and Hamburger menu in a single line
    2. make sticky menu on desktop but NOT on sticky on Mobile
    3. make main blog post area narrow – it’s too wide on desktop

    I have about 250 css lines under additional css after extensive reading. But my inexperience is causing conflicts in the layout.

    So, I’ll start from scratch with the help you can give on the above.

    Thanks.

    Theme Author Tom

    (@edge22)

    Hi there,

    1. This is tough with the standard HTML in the free theme. We would need to see the actual website with the CSS added to provide accurate CSS. Our pro version has a Mobile Header option which does exactly this.

    2. Our pro version has this option as well, but you can use CSS:

    @media (min-width: 768px) {
    #site-navigation {
        position: sticky;
        top: 0;
    }
}

    3. By main blog post area, do you mean the single posts, or the actual blog archives?

    Thread Starter maybenot

    (@maybenot)

    Thank you – your code worked after changing the selector to .site-header.

    I have the rest figured out before posting this topic but because I see many of “when one thing works, something else breaks”, I thought I’d start from scratch with your suggestions.

    For now, this topic is solved.

    • This reply was modified 4 years, 8 months ago by maybenot.
    Theme Author Tom

    (@edge22)

    Sounds good – let us know if you need any help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Large Space Above Header on Mobile’ is closed to new replies.