CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ant_de
ant_de

Reputation: 11

Bootstrap navigation: same space between links

I have this website http://sg.nowcommu.myhostpoint.ch/ and as you can see in the navigation the space between the links is different.

How can I set the same space between the <li> elements?

HTML:

<div class="navbar navbar-fixed-top" data-activeslide="1">
    <div class="container">


        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>


        <div class="nav-collapse collapse navbar-responsive-collapse">
            <ul class="nav row">

                <li data-slide="4" class="col-12 col-sm-2"><a id="menu-link-4" href="#slide-4" title="Next Section"> <span class="text">Mental Coaching</span></a></li>
                <li data-slide="5" class="col-12 col-sm-2"><a id="menu-link-5" href="#slide-5" title="Next Section"> <span class="text">Personal Training</span></a></li>
                <li data-slide="6" class="col-12 col-sm-2"><a id="menu-link-6" href="#slide-6" title="Next Section"> <span class="text">Ernährungsberatung</span></a></li>
                <li data-slide="9" class="col-12 col-sm-2"><a id="menu-link-9" href="#slide-9" title="Next Section"> <span class="text">Philosophie</span></a></li>
                <li data-slide="7" class="col-12 col-sm-2"><a id="menu-link-8" href="#slide-7" title="Next Section"> <span class="text">Feedback</span></a></li>
                 <li data-slide="8" class="col-12 col-sm-2"><a id="menu-link-9" href="#slide-8" title="Next Section"> <span class="text">Kontakt</span></a></li>
            </ul>

        </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
</div><!-- /.navbar -->

Upvotes: 1

Views: 1892

Answers (1)

Chirag S Modi
Chirag S Modi

Reputation: 419

They are equally spaced, but as the 3rd li text is longer than the others, it is showing more space.

See the CSS below 

.nav > li > a : padding:10px 0;

Upvotes: 2

Related Questions