Invisible mobile menu until scroll

Support
#1

Hi there, im wondering if you can help.

I have this site setup, and at the moment I have a fading in menu, I want to keep this, but it doesnt seam to be working in the mobile menu…

Is there a way to make the mobile menu (whole nave bar and logo) invisible until a user scrolls down, ONLY for mobile views…?

Or

Have the same effect the desktop menu has, ie fade in, working on the mobile menu?

Thanks.

#2

Hi @logoglo,

Thanks for writing in.

As of now, not sure what you are trying to achieve. In this case, please share us your URL so we could suggest the best CSS to your customization.

You might want to check the link below for scrolling effect customization.


Hope it helps.

Let us know how it goes.

Thanks.

#3

Sorry, url is: http://entrecoach.kinsta.com

The desktop nav bar works fine, it fades in…but in mobile view, the nav bar isnt fading in, its already there:

#4

Hi there,

You have this code in the Global CSS that is causing the menu area to have a transparent background on mobile:

.x-navbar {
    background-color: rgba(51,51,51,0.80) !important;
    position: absolute;
    width: 100%;
}

The code above is in a 979px media query block. Kindly remove the background color attribute.

Hope this helps.

#5

That worked! thanks!

#6

Ahh, sorry, I know why that was there, it was to give the drop down color, now I have taken it off, it looks bad:

Any chance JUST the drop down can have that transparent color?

Thanks for all your help.

#7

Hi,

To achieve that, you can add the code below in Theme Options > CSS

@media (max-width: 979px) {
.x-nav-wrap.mobile {
    padding: 20px;
    background-color: rgba(51,51,51,0.80) !important;
}
.masthead-inline .x-btn-navbar {
    margin-bottom: 15px;
}
}

You may change the color and numbers to adjust opacity and spacing.

Thanks

#8

You guys ROCK! really! that worked, thanks. Any chance of adding a thin blue border around the drop down mobile menu please? left bottom, and right.

Thanks.

#9

Hi there,

Please update this block of code:

.x-nav-wrap.mobile {
    padding: 20px;
    background-color: rgba(51,51,51,0.80) !important;
}

to

.x-nav-wrap.mobile {
    padding: 20px;
    background-color: rgba(51,51,51,0.80) !important;
    border: 1px solid #00BBE3;
    border-top: 0;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

#10

Perfect, thanks you so much!

#11

We are delighted to assist you with this.

Cheers!

#12

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