Docs

[flyingkiwi]

Hi,

I’m struggling to get the mobile nav button to collapse after a menu item has been touched – the menu is staying open and blocking most of the screen.

I’ve tried every .css and .js solution that I’ve found on here and nothing works.

I have no cache plugin installed, have tested this on numerous devices and ecosystems and keep getting the same result.

Can you please have a look and let me know how to resolve this. Site is racereadymassage.com.au

Thanks in advance!

[Rad]

Hi there,

Thanks for writing in.

Sure, please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery ( function($) {

$(document).ready( function() {

setTimeout( function() {

$('.x-navbar .x-nav-wrap .x-nav > li > a').off('touchstart touchend');

}, 300 ); //Let's make sure it's only unbinded after the binding

} );

$('.x-navbar .x-nav-wrap .x-nav > li > a').on('click', function() { $('.x-btn-navbar').trigger('click'); } );

} );

Hope this helps.

[flyingkiwi]

Thanks! That’s done the trick nicely!

One other quick thing..
The top nav bar is set to transparent initially, then white background once scrolling starts. However while this works on desktop just fine, when loading on mobile it’s starting off white not transparent. It will turn transparent once you scroll down the page and then return to the top though..?

This is in my javascript currently..

jQuery(document).ready(function($){

	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent")

	var rev_height = $(".x-slider-container").height();

	$(window).scroll(function(){

		if ($(this).scrollTop() > rev_height) {

			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: #fff !important');

		} else {

			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important');

		}

	});

});

And this in in my css

@media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}}

.x-navbar, .x-topbar {
border-bottom : 0px!important;
-webkit-box-shadow : none!important;
box-shadow : none!important;
}

Any ideas on what’s going on here?

Thanks

[Rad]

Hi there,

Glad it works, try changing your CSS to this,

@media (max-width: 979px) {
  .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
  }
  .x-navbar {
    background-color: transparent;
  }
}

.x-navbar, .x-topbar {
  border-bottom : 0px!important;
  -webkit-box-shadow : none!important;
  box-shadow : none!important;
}

Transparency should be applied on page load, the code above only applies upon scroll.

Hope this helps.

[flyingkiwi]

That hasn’t changed anything unfortunately.

I also just tried adding !important after the new background-color: transparent without any luck either.

Other ideas? It would be nice to get this working..

Cheers

[Paul R]

Hi,

You can adding this in your custom css

@media (max-width: 979px) {
   .masthead {
       position:absolute;
       width:100%; 
   }
   .x-navbar.x-navbar-fixed-top {
       background-color:transparent;
   }
}

Hope that helps.

[flyingkiwi]

Thanks Paul, that’s worked!

[Paul R]

You’re welcome! 🙂

[Author]

Posts