14

How can I make nav-items' background be completely filled with color not just a part of it?

Here is my try to use Bootstrap pills, but It doesn't do the job. Also, I tried my own CSS, but it's the same as pills.

To sum up, how can I make my navbar (in the image) looks like this one, regarding only the background color of nav-items CSS.

enter image description here

Update: Added HTML and CSS Code

My Code: HTML

            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <a class="navbar-brand" href="#"><i class="fa fa-paw" aria-hidden="true"></i> Purrfection Shop</a>



            <!--<i class="fa fa-home" aria-hidden="true"></i>
            <i class="fa fa-sign-in" aria-hidden="true"></i>
            <i class="fa fa-sign-out" aria-hidden="true"></i>-->


            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="#jumbotron">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about-container">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#footer">Contact</a>
                    </li>
                </ul>
                <ul class="navbar-nav ml-auto nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="#!"><i class="fa fa-user-plus" aria-hidden="true"></i> Sign Up</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#!"><i class="fa fa-user" aria-hidden="true"></i> Login</a>
                    </li>
                </ul>
            </div>

    </nav>

CSS:

.navbar {

            border-bottom: 1px solid #F5F5F5;
            background-color: white;
            text-transform: uppercase;
            letter-spacing: 2px;

        }
3
  • The CSS for nav-item I previously made was just background-color: blue; and it has the same effect as pills from Bootstrap. @MuhammadUmar
    – Tes3awy
    Jun 15, 2017 at 23:56
  • Hmm, I tried to replicate what you have in this JSFiddle, but the result doesn’t look at all like the navbar in your screenshot. The items are always collapsed, and when I fix that none of them have any background color. I’m afraid since I’m not a Bootstrap expert, the only way I could help is by playing with the CSS of a live page that matches what you have. Jun 16, 2017 at 5:24
  • Relevant navbar documentation for other answerers: v4-alpha.getbootstrap.com/components/navbar Jun 16, 2017 at 5:25

3 Answers 3

16
+25

The key is to remove the top and bottom padding from the nav-bar, and add it to the pills, remove the rounded corners from the pills, then wrap your custom cssin a media query to make it responsive.

Here's the JSfiddle.

Here's what it looks like: enter image description here

Here's the code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<style type="text/css">
@media only screen and (min-width: 991px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .nav-pills .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
  }
}
</style>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">
      </span>
  </button>
  <a class="navbar-brand" href="#">
    <i class="fa fa-paw" aria-hidden="true">
    </i> Purrfection Shop</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto nav-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

2
  • In this answer do you use the padding 15px based on the navbar height? If i had a 100px navbar would I use 50 and 50px padding?
    – dave317
    Feb 1, 2018 at 16:24
  • 1
    @dave317 The height of this nav is determined by the padding and height of the text, like this: top-padding + font-size + bottom-padding.
    – Circle B
    Feb 1, 2018 at 22:18
2

Check out this code: [JS FIddle Here] HTML

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">
      </span>
  </button>
  <a class="navbar-brand" href="#">
    <i class="fa fa-paw" aria-hidden="true">
    </i> Purrfection Shop</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto nav-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#jumbotron">Home
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#services">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about-container">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#footer">Contact</a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="#!"><i class="fa fa-user-plus" aria-hidden="true"></i> Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#!"><i class="fa fa-user" aria-hidden="true"></i> Login</a>
      </li>
    </ul>
  </div>

</nav>

CSS:

@media only screen and (min-width: 991px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }
  .active {
    background: blue;
  }
  .nav-item {}
  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.active {
  background: blue;
}
0
-1

Please check below fiddle.use expand view for your result

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
 <style>
      .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .open>.nav-link{background-color: #0275D8;color: #fff;}
      .navbar{padding: 0 1rem;}
      .navbar-toggleable-md .navbar-nav .nav-link{padding: 10px 12px;}
    </style>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      
    </ul>
    
  </div>
</nav>

3
  • 1
    Your code is not responsive, it's only decreasing the size of the navbar so the background gets filled completely with color. I don't see it as a reliable modification.
    – Tes3awy
    Jun 18, 2017 at 0:44
  • Making it responsive is up to you. i only provided code for background color for menu item and as your question said that you have problem with background color not with making it responsive. Let me know if you need any help. @OsamaAbbas Jun 19, 2017 at 8:44
  • I am already using Bootstrap for responsive features, so it doesn't make any sense not to make the navbar responsive as the rest of the body!
    – Tes3awy
    Jun 19, 2017 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.