Site logo

Archived topic

Slideout menu 100% width and height

7 replies · Started by Juan Carlos on July 9, 2018

Viewing posts 1–8 of 8

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

This archived topic is closed to new replies.