Mobile menu behaving strangely

Support
#1

Hi there, see this site:

When you view on a mobile, when it first loads the colors are off (see left of below image) when you scroll down a little, it corrects itself (see right of image)

This is after I have put in code from a previous post: https://theme.co/apex/forum/t/menu-hover-link-not-working/27340

Thanks for you help.

#2

Hello @logoglo,

Thanks for asking. :slight_smile:

Please try adding following CSS under X > Theme Options > CSS:

.x-navbar {
    background-color: #121212 !important;
}

Thanks.

#3

Hey, that works kinda, but it looses the effect I have one there, ie, transparent , scrolls into less transparent…this makes it solid.

#4

Hi There,

Please delete the previous CSS and try with this CSS instead:

@media (max-width: 979px){
    .x-navbar {
        background-color: rgba(51, 51, 51, 0.75) !important;
    }
}

Hope it helps :slight_smile:

#5

Nearly there! thank you, but its pushing the image down, instead over going over the top, so you get a white area above, and it looks wrong…

#6

Hi There,

Please try with this CSS instead:

@media (max-width: 979px){
    .x-navbar {
        background-color: rgba(51, 51, 51, 0.75) !important;
        position: absolute;
        width: 100%;
    }
    .x-navbar.x-navbar-fixed-top {
        position: fixed;
    }
}
#7

Perfect! thank you!

#8

You’re welcome.

#9

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