Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

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

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

Home Forums Support Adding Close Button and Icon to Slide-out Navigation

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #580383
    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
    }
    GeneratePress 2.1.2
    GP Premium 1.6.2
    #580422
    Leo
    Staff
    Customer Support

    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 🙂

    #580964
    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.

    #580990
    David
    Staff
    Customer Support

    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?

    #580998
    Andy

    Thank you excellent, just the contents I think really.

    #581002
    David
    Staff
    Customer Support

    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;
    }
    #581015
    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.

    #581024
    Leo
    Staff
    Customer Support

    Can you link us to the site in question?

    #581027
    David
    Staff
    Customer Support

    Hi Andy, try this as well:

    .slideout-navigation .inside-navigation .slider-exit {
        float: none;
    }
    #581044
    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%; }

    #581555
    Andy

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

    #581563
    David
    Staff
    Customer Support

    Hi Andy,

    target the .offside.is-open

    #581966
    Andy

    Perfect thanks!

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