CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
scandir
scandir

Reputation: 313

Cannot remove default Bootstrap padding in navigation bar

I have a Bootstrap navigation bar that is more or less customized. The things is, Bootstrap applies padding-left and padding-right to the <a> elements in the navbar. I tried to override the padding-left on the first <a> element in the navbar (the one that says "Collection") but no success. It actually has to look like the first <a> element is starting at the very beginning of the navbar. I added a photo for easier understanding.

result

Here is the fiddle: http://jsfiddle.net/jxgkrtsd/8/

Code: 

<ul class="nav nav-tabs nav-justified" role="tablist">
    <div class="bottom-line"></div>
            <li><a href="kolekcija.html">Kolekcija 24<sup> 7</sup></a></li>
            <li><a href="#">Izdelki</a></li>
            <li><a href="#">Zgodba</a></li>
            <li><a href="#">Mediji</a></li>
            <li><a href="#">Materiali</a></li>
        </ul>
        <div class="bottom-line"></div>

CSS: 

@import url("http://fonts.googleapis.com/css?family=Exo:400,500&subset=latin,latin-ext");

body {
    font-family: 'Exo', sans-serif;
    font-weight: 500;
}
.nav > li > a:hover,
.nav > li > a:focus {
  background-color: transparent;
  border-color: transparent;
}

.nav > li > a {
  padding: 10px 5px !important;
  margin-right: 0 !important;
    color: black;
}

.nav-tabs.nav-justified > li > a {
  border-bottom: none;
}

.nav-tabs > li > a:hover {
  border-color: none !important;
}

a:hover,
a:focus {
  color: black !important;
}

.bottom-line {
  height: 1px;
  width: 1430px;
  background: black;
  position: absolute;
}

Upvotes: 3

Views: 6099

Answers (5)

Nishant Kumar
Nishant Kumar

Reputation: 945

I wanted to change the default navbar bootstrap padding. My intention was to change the bottom padding to 4.5rem. Below code worked for me

.navbar{
padding-bottom: 4.5rem !important;

}

Upvotes: 1

jimplode
jimplode

Reputation: 3502

I agree with a few other answers here like @dippas, but to get the text flush to the left, as your picture shows you need to override the anchor padding as well:

.nav-tabs.nav-justified > li > a {
text-align:left;
padding-left:0px !important;
padding-right:0px !important;
}

http://jsfiddle.net/jxgkrtsd/10/

Upvotes: 0

Christopher Esbrandt
Christopher Esbrandt

Reputation: 1198

The issue is that the a tags in the navigation are displayed as blocks, instead of the inline. You can change it to display as a flexible block by setting the display to flex, then retain the full block area as the link by setting the width to 100%.

Simply add these to your custom CSS for .nav > li > a to look like:

.nav > li > a {
 padding: 10px 5px !important;
 margin-right: 0 !important;
 color: black;
 display: flex;
 width: 100%;
}

This will retain the top and bottom padding/margins for blocks, the full width of the block as the link, and remove the left/right padding/margin.

Here's a JSFiddle showing it: http://jsfiddle.net/9kzfaypp/

Upvotes: 0

spasticninja
spasticninja

Reputation: 711

I've needed to do this before. After using <nav class="...."> put the rest of the contents in a new div with class="container-fluid". It should look something like this:

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
 <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand visible-xs" href="{{ HOME_PATH }}/">{{ site.title }}</a>
    </div>
   ...

Then you can use this to get rid of padding for the links in the navbar or for the brand.

nav .container-fluid{
  padding-left:0px;
  padding-right:0px;
}

To get rid of padding in the links you can use something like this:

.navbar-nav>li>a{
  padding-left:0px;
}

Upvotes: 1

ZombieCode
ZombieCode

Reputation: 1661

The problem is not the padding. The problem is that the text is aligned to the center.

Add a text-align: left to your element and things should adjust how you would like them.

This is the code in Bootstrap that is causing the issue

.nav-tabs.nav-justified > li > a {

}

If you alter your jsFiddle you can add it to the following section of CSS:

.nav > li > a {
    padding: 10px 5px !important;
    margin-right: 0 !important;
    color: black;
    text-align:left !important;
}

Please note the !important after it. This will override the main call and give the desired effect.

Here is the updated jsFiddle example.

Upvotes: 4

Related Questions