[Resolved] Slide Out Navigation.

[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)

[Tom]

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?

[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!

[Tom]

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

[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.

[Tom]

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?

[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>

[Tom]

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>

[Jason Westbrook]

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

[Tom]

You’re welcome 🙂

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

[Tom]

Lots more options coming to the slide-out menu 🙂

[Author]

Posts