Css not working for menu

Support
#1 
/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

using this to hide and show items, it should at least hid the menu

#2

Hi @wicara,

I checked and can see that the css codes are being applied.

In your css code it says

width: 0; /* 0 width - change this with JavaScript */

Did you add your javascript code to change this dynamically?

Thanks

#3

it only seems to work if I inline the javascrip instead of adding it to the customizer here is what I am trying to achieve
can I paste this in this form in the customizer or do I have to add more to it ?

#4

Hi @wicara,

Can you share to us your js code

I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

#5 
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}
#6

maybe the bacgound layer zindex is not high enough ?

#7

Hello There,

Thank you for sharing the code.
We don’t recommend this setup because it will have a side effect on your current revslider. It will be off center. If you want to proceed with this setup though, I will give you a Jquery version of the script that works. Note that you may need to adjust revslider to make this work.

   jQuery ( function($) {
	$(document).on('click', '#openNav', function() {
		$('body').css({'margin-left':350});
		$('.x-main').css({'background-color':'rgba(0,0,0,0.4)'});
		$('#mySidenav').css('width',350);
	});
	$(document).on('click', '.closebtn', function() {
		$(this).unbind();
		$('body').css({'margin-left':0});
		$('.x-main').css({'background-color':'white'});
		$('#mySidenav').css('width',0);
	});	
	
} );

This part just need to be updated:

   <span style="cursor:pointer" onclick="openNav()">☰ Product Menu <i class="fas fa-angle-right"></i></span>

To this:

   <span style="cursor:pointer" id="openNav">☰ Product Menu <i class="fas fa-angle-right"></i></span>

Also, for close button from this line:

   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" style="outline: none;">×</a>

Please remove this part onclick="closeNav()"

Here is the screencast: https://screencast-o-matic.com/watch/cqeX160wyA

Hope this helps.

1 Like
#8

honestly I am ok with it just going over the top do I just remove the background component ? I dont need the content moving over.but i am having a problem with the z index of the nav bar , I but the menu to 9999 and it has not helped any help I would very much appreciate it

#9

Hello There,

Ok then, try this:

.x-widgetbar {
    z-index: 999999;
}

The result will be something like this:

It would be better if you can add an ID to the widget. Then transfer that CSS to that ID. .x-widgetbar is a generic selector and it not recommended to add custom CSS like that. It might affect results on your other content inside a another widget.

Hope this helps.

#10

yeah but then the mobile nav menu is hidden behind the navbar when extended (Sorry its been doing my head in )

and

#11

Hi @wicara,

Please note that there are now a lot of custom codes on your site and you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates as providing custom codes goes beyond the scope or our support.

As for the current display, please try adding this code in the Global CSS:

.x-widgetbar .x-column:first-child {
    position: relative;
    z-index: 999;
}

.x-widgetbar .x-column:nth-child(2) {
    position: relative;
    z-index: 9;
}

Also, would you mind providing more information about the issue as depicted on the second screenshot so that we can check?

Thank you.

#12

and the mobile menu it still is being hidden behind the widget area

#13

Hi @wicara,

Please try this code:

@media (max-width: 979px) {
    .masthead {
        position: relative;
        z-index: 99999;
    }
}

Hope this helps.

#14

sure that did not work sorry and thank you for all your help it’s part of the reason I always go X the fantastic support and I can do anything with X. the main menu with the shopping icon goes to a mobile menu at 976 and the widget bar is higher than the mobile menu. so when you extend it, half the menu is hidden. but if I bring the top bar higher the masthead covers the flyover menu and they cannot close it.

#15

Hi @wicara

Thank you but I’m afraid there is nothing we can do about this as we do not support customization.

That is exactly the issue with your setup, the header, and the flyover is not sibling element so you can not just put the flyover menu above the header/masthead, and leave the #x-widgetbar below.

You need to choose which should have a higher z-index between masthead and #x-widgetbar or else re-structure your header.

Thanks,

#16

Thank you and the team for your help

#17

You’re welcome.

#18

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