CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3nav
ChisumTrail
ChisumTrail

Reputation: 109

How to push each <li> element to a new line in vertical <nav>

I have created a vertical navbar that contains an ul element with several li tags inside. I want each li tag to display on it's own line.

I'm able to do this easily by applying a div class = clearfix after each li tag, but I get a warning that 's are not allowed to be nested inside an ul. It renders just fine in browser, but I don't like the warnings and I'm OCD about syntax.

I have tried several different approaches to fix the problem.

CSS Fixes such as Margin/Padding, Clear, Display:Block all to no avail.

Here is my a sample of my code below:

 <div class="col-sm-2" id="siteSafetyContainer" style="display:none">
            <nav class="navbar navbar-inverse" style="font-size:12px;">
                <div id="row">
                    <ul class="nav navbar-nav navbarcustom">
                        <li>
                            <a href="#">Permits</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Standard Safety Permits</a>
                        </li>                           
                        <li>
                            <a href="#"  onclick="">Toolbox Talks</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Atlantic Marine Corps Communities</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Campbell Crossing</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Fort Hood Family Housing</a>
                        </li>                            
                        <li>
                            <a href="#"  onclick="">Ft Drum Mountain Community</a>
                        </li>  
                        <li>
                            <a href="#"  onclick="">PAL</a>
                        </li>                            
                        </ul>
                </div>
            </nav>
        </div>

Standard Safety Permits

Toolbox Talks

Atlantic Marine Corps Communities

Campbell Crossing

Fort Hood Family Housing

Ft Drum Mountain Community

PAL

enter image description here

Upvotes: 0

Views: 272

Answers (3)

ChisumTrail
ChisumTrail

Reputation: 109

McHat and cpt-cruncy,

Thanks to both of you! It was a combination of both of your answers. See below:

.navbarcustom > li {
flex-flow: column wrap !important;
min-width: 260px;}

Upvotes: 0

cpt-crunchy
cpt-crunchy

Reputation: 391

Try this

.navbar-nav{
  flex-flow: column wrap !important;
  min-width: 260px;
}

Upvotes: 1

McHat
McHat

Reputation: 860

.navbarcustom li {
 display: block;
}

Upvotes: 1

Related Questions