Archived topic
Adding Close Button and Icon to Slide-out Navigation
13 replies · Started by Andy on May 20, 2018
Hi,
I searched the forum and found a solution for adding a close link within the slide-out navigation.
However, I'm trying to add the new default GP close icon to the link but not had any success yet.
Below is what I've tried so far:
add_action( 'generate_inside_slideout_navigation', 'tu_add_slideout_close' );
function tu_add_slideout_close() {
?>
<li class="slider-exit"><a href="#"><i class="gp-icon close"><!-- icon --></i></a></li>
<?php
}Hi there,
Can you try adding this CSS?
.gp-icon.close::before {
content: "\f00d";
}
.gp-icon {
font-family: 'GeneratePress' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 40px;
margin: 0 10px;
color: #000;
}Let me know :)
Works perfectly thanks. I thought that CSS was already part of GP so wouldn't need re-adding.
Just a couple of other things. How do I remove the existing 'X' that's outside of the nav and also how can I center the new X and menu items within that slide-out area?.
Thanks again.
Hi Andy, you can remove the original exit button like so:
.slideout-overlay .slideout-exit {
display: none;
}Do you want the entire navigation centered? Or just the contents?
Thank you excellent, just the contents I think really.
Hi Andy, if you're using the slideout everywhere ie. no horizontal nav then you can set the alignment by the customiser > layout > primary nav > navigation alignment - or this CSS:
.main-navigation.slideout-navigation {
text-align: center !important;
}Thanks David,
Almost there, I'm only using the Slide-Out Nav on mobile. The CSS centers the text links but not the new close X toggle that I mentioned at the start of the thread.
Can you link us to the site in question?
Hi Andy, try this as well:
.slideout-navigation .inside-navigation .slider-exit {
float: none;
}Thanks David that fixed it, i also added list-style-type: none; to remove the unwanted bullet point from it.
I've decided it would look best if I increased the width of the whole slide-out to 100% width so its all centered in the viewport. I tried the following CSS but this caused it to remain open.
.offside { width: 100%; }
So just to clarify I would like the entire slideout navigation centered.
Hi Andy,
target the .offside.is-open
Perfect thanks!
Glad we could help!
