[Resolved] Slide out Navigation

[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

[David]

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.

[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

[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!

[David]

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.

[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

[David]

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?

[Ronny]

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

[David]

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

[Ronny]

Hi David,

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

Kind regards,
Ronny

[David]

Where did you add the CSS?

[Ronny]

Hi David,

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

Kind regards,
Ronny

[David]

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

[Ronny]

Hi David,

That did the trick. It’s perfect now!

Thanks so much for your help David. Awesome support!

Kind regards,
Ronny

[David]

Glad to be of help

[Author]

Posts