[Resolved] Slide Out Navigation.

Home Forums Support Slide Out Navigation.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #294905
    Jason Westbrook

    Hey guys I have been playing around with the slide-out navigation and finalizing m last few tweaks but need help with the following if possible. Example site I am working on is demo1.builtonmission.com/demo

    1. “X” button to be on top of slider in first position.

    2. CSS to format spacing between menu items only without affecting the main default menu.

    3. Being able to place slide-out navigation with “X” button first, logo second, video third menu last. (currently I cannot separate “X” format he menu items)

    GP Premium 1.2.96
    #295047
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. Add this into a text widget above the others:

    <li class="slider-exit"><a href="#">Close icon in here</a></li>

    Then you can style it to be large, centered or whatever.

    2. Try this:

    .slideout-navigation .main-nav li {
        margin-bottom: 5px;
    }

    3. Same as #1?

    #295506
    Jason Westbrook

    1. #1 worked great. However how would I position it and make sure its white and hover white?

    2. Menu spacing worked but now its doing a funky thing like its cutting off text when its hovered and not aligned with the rest of the widget. Any other css for that?

    Thanks so much!

    #295541
    Tom
    Lead Developer
    Lead Developer

    1. This should do it:

    .slider-exit a {
        color: #FFF;
    }

    2. Remove this:

    .slideout-navigation .main-nav li {
        margin-bottom: -35px;
    }

    And add this:

    .slideout-navigation .main-nav ul li a {
        line-height: 30px;
    }
    #295709
    Jason Westbrook

    Boom! That worked great too! Thank you so much! Last question…

    How do I move the “X” to align with the rest of the widget info? Currntly its farther to the right than the rest of the widgets.

    #295839
    Tom
    Lead Developer
    Lead Developer

    There seems to be some kind of broken HTML going on where the widget container isn’t wrapping around the icon.

    Can you show me exactly what you have added into the first widget area?

    #295861
    Jason Westbrook

    widget #1:
    <li class="slider-exit"><a href="#"><i class="fa fa-times fa-2x" aria-hidden="true" ></i></a></li>

    widget #2:

    <img src="http://demo1.builtonmission.com/wp-content/uploads/2017/03/cropped-mission-white-logo.png" width='200' alt="logo" />
    <br/><br/><br/>
    <iframe width="200" height="100" src="https://www.youtube.com/embed/iNJdPyoqt8U" frameborder="0" allowfullscreen></iframe>

    widget #3:

    <a href="http://www.facebook.com/builtonmission"> <i class="fa fa-facebook-square fa-lg"></i></a>
    <a href="http://www.twitter.com/builtonmission"> <i class="fa fa-twitter fa-lg"></i></a>
    <a href="http://www.instagram.com/builtonmission"> <i class="fa fa-instagram fa-lg"></i></a>
    <a href="http://www.vimeo.com/builtonmission"> <i class="fa fa-vimeo fa-lg"></i></a>
    <a href="your link here"> <i class="fa fa-apple fa-lg"></i></a>
    <a href="your link here"> <i class="fa fa-android fa-lg"></i></a>
    #295872
    Tom
    Lead Developer
    Lead Developer

    Try replacing:

    <li class="slider-exit"><a href="#"><i class="fa fa-times fa-2x" aria-hidden="true" ></i></a></li>

    With:

    <ul><li class="slider-exit"><a href="#"><i class="fa fa-times fa-2x" aria-hidden="true" ></i></a></li></ul>

    #295877
    Jason Westbrook

    Bro thank you! That worked! Its all come together now! Thanks so much!!!

    #296102
    Tom
    Lead Developer
    Lead Developer
    #435027
    David R

    Slide-out navigation menu item spacing would be a great option, just like you have line height and paragraph margin in body typography. I have several sites where menu item text falls on two lines, and you can’t tell one item from other without this CSS fix. Example: https://spar.network

    I want low menu item height so two-line text appears as one item, but high menu item spacing so there’s a gap between them.

    I used:

    .slideout-navigation .main-nav ul li a {
       margin: 15px 0px;
    }

    -David R
    -Sysop
    -Wild Wolves Media

    #435128
    Tom
    Lead Developer
    Lead Developer

    Lots more options coming to the slide-out menu 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.