[Resolved] Adding Close Button and Icon to Slide-out Navigation

[Andy]

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
}

[Leo]

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 🙂

[Andy]

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.

[David]

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?

[Andy]

Thank you excellent, just the contents I think really.

[David]

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

[Andy]

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.

[Leo]

Can you link us to the site in question?

[David]

Hi Andy, try this as well:

.slideout-navigation .inside-navigation .slider-exit {
    float: none;
}

[Andy]

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

[Andy]

So just to clarify I would like the entire slideout navigation centered.

[David]

Hi Andy,

target the .offside.is-open

[Andy]

Perfect thanks!

[David]

Glad we could help!

[Author]

Posts