Transparent Fixed Navbar with opaque header on scroll issue on mobile

Support
#1

Hi there, i tried t achived Transparent Fixed Navbar with opaque header on scroll. I searched for similar problems in other thread, and found this thread:

I post these on edit global java script

jQuery ( function($) {

$(window).on(‘scroll’, function() {

if ( $(this).scrollTop() > 0 ) {
$(’.x-navbar’).css(‘background’, ‘rgba(0, 0, 0, 0.9)’);
} else {
$(’.x-navbar’).attr(‘style’, ‘’);
}

} );

} );

and

This on edit global css for slow transition

.x-navbar {
-webkit-transition: .5s; /* Safari */
transition: .5s;
}

It worked but it doesn’t worked on mobile display. There are 2 issues on mobile display,
the header is opaque from the top.
the menu on mobile display is transparent (which is not what i looking for.

Can you help me.

#2

Hi sabeerabeauty,

Please add this CSS code to (X > Theme Options > CSS):

@media (max-width: 979px){
    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: fixed;
    }
    .x-navbar .mobile .x-nav li>a {
        background-color: #ffffff;
    }
}

I’m pretty sure this is what you are looking for.

Thanks.

#3

Hi there, thank you for your reply.

The code solve the second problem. The background color for menu button is fix.

However, for the first problem, its not fixing it correctly.
On mobile display, when the page load, the header is opaque, when i scroll a little bit it become transparent, then become opaque again on further scrolling.

I show you,

I’m looking for the header to set to transparent on page is loaded, then become opaque when scrolling down.

#4

Hi,

Thanks for the clarification, please update the CSS snippet to be like:

@media (max-width: 979px){
    .x-navbar, .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: fixed;
    }
    .x-navbar .mobile .x-nav li>a {
        background-color: #ffffff;
    }
}

Thanks.

#5

That did the job. Thank you very much!

#6

You are welcome!

#7

but unfortunately i have another favor to ask.

Because the I disable page title, and header is inline and transparent, in mobile display, the body of the page is overlapping with my logo.
No such problem in large display.

https://www.sabeerabeauty.com/wp-content/uploads/2018/04/WhatsApp-Image-2018-04-06-at-6.08.16-AM.jpeg

Is there a way to bring down all a bit the page body in all pages in mobile display?

Thanks in advance.

#8

Should i open new thread?

#9

Hello there,

Yes there is. First, you need to add a class to the 1st section of Privacy Policy, Contact Us and About Us pages. E.g. my-section

Then on your Homepage, add a class on the 1st column of 1st section. E.g. my-column

Lastly, update the code given by my colleague to:

@media (max-width: 979px) {
    .x-navbar, .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: fixed;
    }
    .x-navbar .mobile .x-nav li>a {
        background-color: #ffffff;
    }
    .masthead-inline .desktop .x-nav {
         float: left !important;
    }
    body:not(.woocomerce) .my-section,
    #woologin {
         padding: 100px 0 10% !important;
    }
     body:not(.home) .x-navbar {
         background-color: #fff !important;
    }
    .x-navbar {
         height: 18.5% !important;
    }
    #hifp .my-column {
         margin-top: 100px;
    }
}

No. It’s okay that you’ve asked this request on this thread without opening a new one as these are UI related issues which are connected to the previous requests.

Hope this helps.

#10

It works. Thank you. You are the best.

#11

You’re welcome.

#12

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