Mobile Menu Formatting Help

Support
#1

When I click on the hamburger menu on mobile, it opens but lays over my content. How do I change this?

http://dallas170.arvixeshared.com/~bburwell/mydummydomain.com/

#2

Hi There,

Thanks for writing in!

I can see the menu pushes your content when it open. Can you please let us know what exactly you want ?
You can send us a screenshot too.

Thanks

#3

The menu lays on top of my slider and I want to try to avoid that. Any suggestions?

#4

Hi there,

Please add this code in the global CSS panel:

@media (max-width: 480px) {
    .masthead {
        margin-bottom: 0;
    }
}

Hope this helps.

#5

Hmm…I put this in the global CSS under Theme Options, but it didn’t seem to change anything. What am I doing wrong?

#6

Additionally, when looking at my header on mobile, there is a large empty space above my slider. How do I change this so that the logo and menu is on top of the photo and there is no black space?

#7

Hi there,

Please try this instead:

@media (max-width: 480px) {
    .x-navbar-wrap {
        position: absolute;
        z-index: 9999;
        width: 100%;
    }

    .x-navbar .x-nav-wrap .x-nav li  a {
        background-color: #000;
    }
}
#8

Now when the menu opens, it all just lays on top of the photo, which I guess is fine, but I’d like the background to darken so that the cover photo can’t be seen as well and for the font to be white.

Ideally the menu would just push the photo down like it did before but with none of it hanging over the photo.

Any suggestions on how to do either of those?

#9

Hi there,

Please remove this block of code:

@media (max-width: 480px) {
    .x-navbar-wrap {
        position: absolute;
        z-index: 9999;
        width: 100%;
    }

    .x-navbar .x-nav-wrap .x-nav li  a {
        background-color: #000;
    }
}

and use:

@media (max-width: 979px) {
    .x-nav-wrap.mobile.collapse.in {
        display: block;
        margin-bottom: 100px;
    }
}

Further customization from here will fall beyond the scope of our support. Kindly get in touch with a developer if you are not comfortable in making the changes.

Hope this helps.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.