Archived topic
Slideout menu 100% width and height
7 replies · Started by Juan Carlos on July 9, 2018
Hi, how can I get a menu like this? https://www.oway.it/es/
A slideout menu of 100% width and height and a submenus opening to the right.
This code dont work for me:
.slideout-navigation {
width: 100%;
}
Hi there, it's a little more complicated :) this will get you started with the 100% width.
Try this CSS:
.main-navigation.offside {
width: 100%;
left: -100%;
}
.offside--left.is-open, .offside-js--is-left .offside-sliding-element {
-webkit-transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
-o-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.slideout-overlay {
z-index: 1000000;
width: 100%;
pointer-events: none; /* Stop overlay from blocking menu */
background-color: transparent;
}
.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
right: 0;
left: auto;
pointer-events: auto;
color: #000; /* Change color of exit button */
}
Wow... Now I see that its a "little more" complicated... :D
The code works very well, a lot of thanks!!!
But how can I do to opens the submenu to the right?
The code that I found in https://docs.generatepress.com/article/navigation-dropdown/ dont work for me:
.dropdown-click .main-navigation ul ul ul,
.dropdown-click .secondary-navigation ul ul ul {
left: 100%;
top: 0;
position: absolute;
}
.dropdown-click .main-navigation ul ul .dropdown-menu-toggle:before,
.dropdown-click .secondary-navigation ul ul .dropdown-menu-toggle:before,
.dropdown-click .main-navigation ul ul .menu-item-has-children.sfHover>a .dropdown-menu-toggle:before {
content: "\f105";
}
.dropdown-click .main-navigation ul ul .dropdown-menu-toggle:before,
.dropdown-click .secondary-navigation ul ul .dropdown-menu-toggle:before,
.dropdown-click .main-navigation ul ul .menu-item-has-children.sfHover>a .dropdown-menu-toggle:before {
content: "\f105";
}
We can try this:
#generate-slideout-menu.main-navigation .main-nav ul ul {
left: 100%;
}
Dont work for me :(
Sorry missed of a % sign, edited the code above, if it still don't work, (i hate to say it) make that property: left: 100% !important;
Now its work perfectly.
Your are the best!
A lot of thanks!
Glad to be of help