Mobile Nav Button not Working on Various Screen Sizes and is it Possible to Set the Slider to Appear Under the Nav Bar on Specific Screen Sizes?

[core365]

Hi, I’m currently working on a website that I’ve been using CSS to change the layout of the header area when viewed on different screen sizes. I have a couple of issues I’m hoping you’ll be able to help me out with please!

1. The mobile nav button isn’t working on various screen sizes - when you click on it the menu doesn’t open:
   980px-1199px
   768-979px
   481-767px

2. Is it possible to set the slider to appear under the nav bar on specific screen sizes? In particular 481-767px

I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

[Prasant]

Hello @core365,

Thanks for asking.

1. I checked the website on my end and can see that on some screen sizes navbar is not working, especially iPad Pro. However, I also noticed that you have made significant customizations in terms of the behaviour of navigation. I suggest you to first remove all the customizations that includes (CSS) and then test the website again upon clearing browser cache.
2. Yes, using CSS media queries you can define the rule to display slider for specific screensizes. Here is a sample CSS that you can take a look.

.x-slider-container.below {
    display: none;
}

@media only screen and (max-width: 600px) {
    .x-slider-container.below {
    display: block !important;
}
}

To learn more about CSS and media queries, please take a look at following resources:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.