Docs

[gselway]

Hi it doesn’t work on my devices. Plus the header is no longer fixed at the top of the page.

Sometimes it’s white, other times it’s transparent. It now seems very buggy!

[Joao]

Hi There,

On My end it is working perfectly, I tested on Chrome and Firefox PC

Please let us know what device and browser you are using while experiencing the issue.

Thanks

Joao

[gselway]

This issue and the entire enquiry is related to mobile/ smaller screens!

[Rahul]

Hi There,

Would you mind sending us a screenshot and brief about the changes which you want us to implement on your mobile/ small screen view.

Thanks

[gselway]

Hi It’s proving difficult to unpick what does what now. 🙂

I have this code on the home page:

jQuery(document).ready(function($){
  $('.home.x-navbar-fixed-top-active .x-navbar-wrap').css('height', 0);
  $('.home .x-navbar').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
  
  $(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
      $('.home .x-navbar-fixed-top').css({'background-color': '#fff', 'box-shadow': '0 0.15em 0.35em 0 rgba(0,0,0,0.135);', 'border-width' : '1px'});
    } else {
      $('.home .x-navbar-fixed-top').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
    }
  });
});

Perhaps this is causing a conflict somewhere?

Thanks

Gavin

[Jade]

Hi there,

Kindly provide us with the admin details to your site so that we could check it ourselves.

Thank you.

[gselway]

This reply has been marked as private.

[Jade]

Hi there,

Thanks for the details.

Please add this code in the customizer:

.x-navbar .mobile .x-nav {
    background-color: #fff;
}

.x-navbar .mobile .x-nav li {
    padding: 0 20px;
}

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

This should set the background color of the mobile menu dropdown as you click the burger icon and should set the position of the header to fixed on mobile.

Hope this helps.

[gselway]

This reply has been marked as private.

[gselway]

This reply has been marked as private.

[Rue Nel]

Hello There,

How do you want it to look like in a smaller device? Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[gselway]

Hi Rue,

Upon selecting the drop down menu that appears on smaller screens (burger icon), I would like the menu drop down to turn white (which it now does) and also the header to turn white at the same time (which it currently does not).

I hope that helps.

Thanks

Gavin

[Paul R]

Hi Gavin,

Please remove the code in your custom css that reads

.x-navbar .mobile .x-nav {
    background-color: #fff;
}

Then add this in your Custom > Edit Global Javascript in the customizer

jQuery(function($) {

$('.x-nav-wrap.mobile').on('show.bs.collapse', function () {
    $('.x-navbar').css('background','#fff');
});

$('.x-nav-wrap.mobile').on('hidden.bs.collapse', function () {
    $('.x-navbar').css('background','transparent');
});

});

Hope that helps

[gselway]

Thank you.

Almost there.

Is it possible to make this function upon selecting the submenu at the top of the page rather than after scrolling?

The sub menu and header initially appear transparent and then both go white after scrolling and then selecting the sub menu. This is only for mobile as the desktop version functions as it should.

[Jade]

Hi there,

Please use this code instead:

jQuery(function($) {

$('.x-nav-wrap.mobile').on('show.bs.collapse', function () {
    $('.x-navbar').css('background','#fff');
});

$('.x-nav-wrap.mobile').on('hidden.bs.collapse', function () {
  
  	if($(window).scrollTop() < 200 ) { 
    	    $('.x-navbar').css('background','transparent');
        }
});

});

[Author]

Posts