CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
behar
behar

Reputation: 1

Issue with an adding padding to the left and right of the navbar using Bootstrap

Hey guys I have a problem with padding on navbar with Bootstrap because I am not able to add padding right and left to menu items like "Home" "Features" etc, but when I do padding-top and bottom it works?

anyone can check code and see why padding left and right to menu items doesn't have any effect, but if you add padding-top and bottom it works?

<nav class="navbar navbar-expand-lg navbar-light bg-orange">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

CSS Code is Below

.navbar{
    text-align: center;
    padding: 0;
    border-bottom: 4px solid black;
}
.navbar-brand{
    margin-left: 34px;
    font-size: 25px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
}
.bg-orange{
    background-color: yellow;
}
.navbar-nav{
    font-size: 25px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 
    'Lucida Sans', Arial, sans-serif;
}
.nav-item{
    transition: 0.3s;
    padding: 22px 0px 22px 0px;
}
.nav-item:hover{
    background: orange;
}

UPDATE: FIXED IT: Changed class of "nav-item nav-link" to "nav-item"

Upvotes: 0

Views: 4113

Answers (4)

Stuart
Stuart

Reputation: 6780

It is the specificity of your selector.

The default bootstrap styles for .nav-link are:

.navbar-expand-lg .navbar-nav .nav-link { ...

Your selector is just: 

.nav-link { ...

As you can see, the bootstrap one is more specific. You need to be more specific (without using !important!)

Seeing as you have an id on your .navbar-collapse, you could do:

#navbarNavAltMarkup a.nav-link { ...

That is using an ID, ID's are more specific than classes.

Upvotes: 0

Void Spirit
Void Spirit

Reputation: 909

So the answer to your question because it is using bootstrap's padding:

enter image description here

1. You need to rewrite it with !important tag.

padding: top, right, bottom, left !important;

The code above is just to show what values go where.

2. Another solution is to add new class

.item{ padding-right:22px !imporant; }

and add this class to elements that you want to override and don't affect other elements with bootstrap's class.

Upvotes: 0

user10460926
user10460926

Reputation:

maybe this will work?

    .navbar{
        text-align: center;
        padding: 0;
        border-bottom: 4px solid black;
        height: 60px;
    }

    .navbar a{
        padding: 10px;
        margin: 5px 0 0 0;
        float: left;
    }

    .navbar-toggler {
        margin: 20px 10px 0 10px;
        height: 25px;
        width: 25px;
        float: left;
    }

    .navbar-brand{
        margin-left: 34px;
        font-size: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
        'Lucida Sans', Arial, sans-serif;
    }
    .bg-orange{
        background-color: yellow;
    }
    .navbar-nav{
        font-size: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
        'Lucida Sans', Arial, sans-serif;
    }
    .nav-item{
        transition: 0.3s;
        padding: 32px 20px 22px 0;
        margin: 5px 0 0 40px;
    }
    .nav-item:hover{
        background: orange;
    }
<nav class="navbar navbar-expand-lg navbar-light bg-orange">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

Upvotes: 0

Kev
Kev

Reputation: 2726

Bootstrap's css has padding-right: 0; declared on nav-link in _navbar.scss.

You can either

  1. include your css file after bootstrap's on the page, or
  2. use !important to make your style declaration take precedence.

Also, I think you have your css padding declaration mixed up. It works for me with 1 small change:

https://codepen.io/anon/pen/NebeMN

Simply change padding: 22px 0 22px 0; to padding: 0 22px 0 22px;

The order is: top, right, bottom, left. See https://www.w3schools.com/css/css_padding.asp. (FYI - This can be shortened to padding: 0 22px;)

So finally you end up with padding: 0 22px !important;. However, I would recommend using option 1 above rather than using !important.

Upvotes: 0

Related Questions