[Resolved] Slide out Navigation

Home Forums Support Slide out Navigation

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1061412
    Ronny

    Hi guy’s,

    I’m using the slide out navigation at the moment and i have some questions as the customize options seem a bit limited:

    1. Is it possible to add a ‘header’ in the slide out navigation which has a different color from the rest of the menu and contains a text and the close ‘x’?

    2. I can change the font size of the menu items but not of the menu sub items. How can i go and change that.

    3. I would like to align menu to the left. That possible?

    Thanks!

    Kind regards,
    Ronny

    #1061977
    David
    Staff
    Customer Support

    Hi there,

    if we can do one at a time. For the Slideout header we can do this:

    1. Create a new Hoo Element.
    2. Add this Markup:

    <div class="slideout-header">
    	<div class="inside-slideout-header">
    		<h2>
    			<?php echo get_bloginfo( 'name' ); ?> <!-- Get site title -->
    		</h2>
    		<button class="slideout-exit has-svg-icon header-exit"><span class="gp-icon pro-close">
    				<svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
    					<path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path>
    				</svg>
    			</span> <span class="screen-reader-text">Close</span></button>
    	</div>
    </div>

    3. Select inside_slideout_navigation hook
    4. Check execute PHP
    5. Set Display Rules to Entire Site.

    Then add this CSS:

    /* Header text and background colors */
    .slideout-header {
        background-color: red;
        color: #fff;
    }
    
    /* Slideout exit color */
    .slideout-navigation button.slideout-exit.header-exit {
        color: #fff;
    }
    
    /* Remove default exit */
    .slideout-navigation button.slideout-exit:not(.header-exit) {
        display: none !important;
    }
    
    /* Align header and exit */
    .inside-slideout-header {
        display: grid;
        grid-template-columns: auto 65px;
        align-items: center;
        padding: 10px 0 10px 10px;
    }
    .inside-slideout-header h2 {
        margin-bottom: 0 !important;
    }
    
    /* remove fixed close button if using overlay */
    .slideout-navigation.do-overlay .slideout-exit {
        position: unset;
    }

    This works best with the Off Canvas set to Slide and you should set the Exit button to inside.

    #1062703
    Ronny

    Hi David,

    Thank you. This was exactly what i was looking for. Very nice solution with the hook!

    There is only one issue with the close button. For some reason the ‘x’ is shown twice. Any idea why this is thie case?

    The other questions i was able to figure out.

    Thanks again,
    Ronny

    #1062709
    Ronny

    Hi David,

    One additional question: is it possible increase the size of te slide out menu to let’s say 85% – 90% of the width?

    Thanks!

    #1062797
    David
    Staff
    Customer Support

    I edited the CSS above to give the third rule some importance. If that don’t work can you share a link to the site.

    Are you using the Slide effect ( not overlay ) – and if so which side do you want it coming in from ? Its tricky to adjust.

    #1062822
    Ronny

    Hoi David,

    That didn’t work.

    You can find the url in the : “Your website URL” field in the first post.

    Yes, i’m using the slide out from the left side.

    Kind regards,
    Ronny

    #1062848
    David
    Staff
    Customer Support

    In Customizer > General can you select SVG Icons.

    When you say 85-90% width is this of the Browser width or the current slide out width?

    #1062856
    Ronny

    I mean 85% – 90% of the browser width.

    #1062871
    David
    Staff
    Customer Support

    Try this CSS:

    .main-navigation.offside {
        position: fixed;
        width: 85%; /* Must match offside--left pos */
        height: 100%;
        height: 100vh;
        top: 0;
        z-index: 9999;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .offside, .offside--left {
        left: -85%; /* Must match offside width */
    }
    
    .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);
    }
    #1063668
    Ronny

    Hi David,

    I’ve added the css but that didn’t change the width of the slide out menu.

    Kind regards,
    Ronny

    #1063800
    David
    Staff
    Customer Support

    Where did you add the CSS?

    #1067111
    Ronny

    Hi David,

    I’ve added the css to the GeneratePress Child style.css.

    Kind regards,
    Ronny

    #1067325
    David
    Staff
    Customer Support

    Try this to make the CSS more specific:

    #generate-slideout-menu.offside {
        position: fixed;
        width: 85%;
        /* Must match offside--left pos */
        height: 100%;
        height: 100vh;
        top: 0;
        overflow: auto;
    }
    
    #generate-slideout-menu.offside,
    #generate-slideout-menu.offside--left {
        left: -85%;
        /* Must match offside width */
    }
    
    #generate-slideout-menu.offside--left.is-open,
    #generate-slideout-menu.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);
    }
    #1068094
    Ronny

    Hi David,

    That did the trick. It’s perfect now!

    Thanks so much for your help David. Awesome support!

    Kind regards,
    Ronny

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