[Resolved] Slideout menu 100% width and height

Home Forums Support [Resolved] Slideout menu 100% width and height

Home Forums Support Slideout menu 100% width and height

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #619030
    Juan Carlos

    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%;
    }

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #619087
    David
    Staff
    Customer Support

    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 */
    }
    #619096
    Juan Carlos

    Wow… Now I see that its a “little more” complicated… πŸ˜€

    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";
    }

    #619130
    David
    Staff
    Customer Support

    We can try this:

    #generate-slideout-menu.main-navigation .main-nav ul ul {
        left: 100%;
    }
    #619350
    Juan Carlos

    Dont work for me πŸ™

    #619372
    David
    Staff
    Customer Support

    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;

    #619387
    Juan Carlos

    Now its work perfectly.

    Your are the best!

    A lot of thanks!

    #619415
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.