Mobile Slide Down Menu Blocked by Header Margins – Intergalactic

  • Unknown's avatar
    swannie79 · Member ·

    Hi there! We had to add some custom css so that the header image adjusted properly to multiple screen sizes without being cut off at top and bottom (for wider screens) or too big (for smaller/mobile screens). The problem is that now it seems those margins are blocking the slide-down menu. This only occurs on a smaller, mobile screen since the menu comes from the right on larger screens. Is there code to bring it in front of the header image or override the margin?

    site is: http://theknowapp.wordpress.com
    custom css is: 

    .entry-summary .more-link {
	display: none;
}

.header-background {
	opacity: 1;
}

#masthead {
	max-height: 100px;
}

.site-branding {
	padding: 2.3em 1.7em;
}

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    If you remove the following declaration, your menu will slide out on mobile correctly:

    #masthead {
	max-height: 100px;
}

    I’m not sure why you are limiting the height of the header like that, but the max-hight is what is causing the menu to not display, likely because the height (on mobile) of the header + menu is more than 100px.

    With this in mind, you may need to experiment a bit to find a different way to accomplish the same goal without using max-height.

  • The topic ‘Mobile Slide Down Menu Blocked by Header Margins – Intergalactic’ is closed to new replies.