How to customize the color of Navbar pills in Bootstrap 4 to fill the entire height

Is there a way to ensure that the background of nav-items is completely filled with color rather than just partially?

I attempted to use Bootstrap pills, but it did not achieve the desired effect. I also experimented with my own CSS, but encountered similar results.

In essence, I am seeking a solution to make my navbar (as shown in the image) resemble this example, specifically in terms of the background color of the nav-items in CSS.

https://i.sstatic.net/w2Hca.png

Update: Included 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;

        }
javascripthtmlcssbootstrap-4twitter-bootstrap-4

Answer №1

To make the navigation bar responsive, you need to adjust the padding of the pills and remove rounded corners, as well as wrap custom CSS in a media query.

Check out the code on JSfiddle.

Here is a preview: https://i.sstatic.net/KdkQY.png

Here is the updated 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>

Answer №2

Take a look at this piece of code: [JS Fiddle Here] Markup

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

Styling:

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

Answer №3

Make sure to review the fiddle below. Click on the expand view for your results.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to insert menu links into the container

Currently, I have a logo and image slider placed next to each other in a container. However, I am facing difficulty in adding 3 menu links horizontally under the logo. Every time I try to do so, the links end up going above the image slider, causing it to ...

htmlcssimagehyperlinkslider

How to link external css files in a Node.js project

Can I add an external CSS file in node.js using EJS? I attempted to do so, but encountered difficulties: app.use('/static', express.static('/view')) I included the CSS in EJS like this: <link rel="stylesheet" type="text/css" href ...

cssnode.jsexpresssassejs

Angular pop-up message not displaying title or content

I have integrated the toaster directive into my AngularJS web project. Following the documentation, I have declared the container on my view as shown below. <toaster-container toaster-options="{'time-out': 3000, 'close-button':true ...

javascripthtmlangularjstoast

The Android WebView experiencing issues with the functionality of the Hamburger Menu

I'm facing an unusual issue with the Android WebView in my app. The hamburger menu on my website works perfectly fine on my mobile browser, but when I try to open it in the Android WebView, it does not fully expand to show the menu items. I have trie ...

androidcsswebviewbootstrap-5

The resizing effect in jQuery causes a blinking animation

I would like to create a functionality where, when the width of .tabla_gs_gm surpasses the width of .content, .tabla_gs_gm disappears and another div appears in its place. While this is already working, there seems to be a screen flicker between the two d ...

javascriptjqueryhtmlcss

"When the screen resolution changes, the absolute positioning of images won't function as expected

I am trying to overlay one image on top of another background image, but I am facing an issue. When I change the screen resolution, the position of the image that should be placed over the background image also changes. Below is the code I am using: ...

htmlcss

Could someone provide a detailed explanation of exhaustMap in the context of Angular using rxjs?

import { HttpHandler, HttpInterceptor, HttpParams, HttpRequest, } from '@angular/common/http'; import { Injectable } from '@core/services/auth.service'; import { exhaustMap, take } from 'rxjs/operators'; import { Authe ...

javascriptangularangularjstypescriptrxjs

Surprising behavior encountered while utilizing fsPromises.open with Node.js

As I work on a larger app, I encounter an issue with a file writing operation. I am utilizing fsPromises to generate an autosave file, but the path variable seems to lose its value between a console log for debugging and the actual call to open the file. I ...

javascriptnode.jsnode.js-fs

Is it truly impossible to align text around an image using flexbox?

In typical situations, you can easily float an image left or right to wrap text around it. However, in flexbox layouts, floating elements do not work as expected and finding a solution can be challenging. It is worth noting that Bootstrap 4 will be implem ...

cssflexboxtwitter-bootstrap-4

What exactly is the purpose of measuring "First Load JS" in the @next/bundle-analyzer tool?

The analysis generated by the NextJS bundle analyzer appears as follows: Page Size First Load JS ┌ λ / 12 ...

javascriptnext.js

How to create a WordPress sidebar that remains fixed while scrolling

I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...

phphtmlcsswordpress

Trail of crumbs leading to pages displayed in a div container

My website is designed with only one page where all other pages are loaded within a div. I am looking to implement breadcrumbs to keep track of the pages loaded inside the div. However, the solutions I have found online only work for pages loaded in the en ...

phpjavascriptjqueryajaxbreadcrumbs

The parent's height remains unaffected by the margins of its child element

My code snippet is concise: .parent{ box-sizing: border-box; } .child{ height: 100px; margin: 20px; background: red; } .a1{ background: green; } <!DOCTYPE html> <html> <head> </head> <body> ...

htmlcss

Python's Selenium encountering a NoSuchElementException with the error message "./ancestor-or-self::form"

Trying to create a Python script that allows me to input my credentials and tweet text in the Python console. The script should then log in and post a tweet using Selenium. Everything works fine, except for the final click on the Tweet button which is caus ...

javascriptpythonhtmlseleniumtwitter

React: Store numerous identical input fields in a single state container

Currently, I have three identical input fields formatted as phone numbers. Each field has its own state and handle method, creating unnecessary repetition in the code. The UI components used are from the Material-UI library, with phone number formatting a ...

javascriptreactjsmaterial-designmaterial-ui

Creating a debounce functionality by isolating it from a keydown event listener

I have a table with selectable rows using up and down arrows. When a row is selected, an ajax call is made to fetch the record. To prevent users from spamming ajax requests, I implemented a debounce function called from a directive triggered by a keydown ...

javascriptjqueryangularjsajax

What is the reason for this basic callback running before the setTimeout function?

Interesting behavior is observed in this code, where 'output 2' is logged before 'output 1' due to the setTimeout function. const func1 = () => { setTimeout(() => { console.log('output 1'); }, 3000); }; con ...

javascriptcallback

CSS Priority - determining the ultimate winner

I have an upcoming exam and I'm reviewing the previous exam paper that was given to me. The question is: When multiple style sheet rules are applied to the same element, which type of rule takes precedence? a. Any declaration from the browser b. ...

css

What are some ways to implement drop-down functionality using CSS?

I've been working on tweaking the CSS of this website for what feels like an eternity. I just can't seem to figure out how to make the "medical" menu item drop down to display the rest of the hidden menu items. I've managed to unhide and exp ...

csscontent-management-systemdrupal-7drop-down-menudrupal-themes

What is the best method for utilizing the CSS :target selector in order to generate a versatile modal box?

I am looking for a way to display my vast collection of proverbs from an endangered language without overcrowding the page. I have implemented a modal box solution using CSS :target selector, which expands a hidden div element when clicked on. However, I n ...

htmlcss