Slide Out Navigation.

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?

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!

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

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.

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?

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>

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>

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

You're welcome :)

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

Lots more options coming to the slide-out menu :)