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.

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;

        }

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.

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;

        }

• javascript
• html
• css
• bootstrap-4
• twitter-bootstrap-4

• 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 Commented 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. – Rory O'Kane Commented Jun 16, 2017 at 5:24
• Relevant navbar documentation for other answerers: v4-alpha.getbootstrap.com/components/navbar – Rory O'Kane Commented Jun 16, 2017 at 5:25

3 Answers 3

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:

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>

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;
}

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>