Can the color of the expanded navigation bar in Bootstrap 4 be customized?

I'm currently in the process of developing a Bootstrap website and was wondering whether it is feasible to add a background color to the expanded navbar specifically on small screens. Feel free to refer to the images below for a visual representation of what I have in mind:

View for larger screens

View for smaller screens

Essentially, I am interested in having a distinct background color appear when the hamburger menu is clicked and the menu expands. On larger screens, this background color should also be present.

I am aware of how to modify the background color of a navbar as a whole, but I am specifically inquiring about the possibility of applying it only to the expanded menu.

Edit: Below is an excerpt from my navbar code:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <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 w-75 m-auto justify-content-around">
      <a class="nav-item nav-link active" href="#">About Us <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Products</a>
      <a class="nav-item nav-link" href="#">Specialties</a>
      <a class="nav-item nav-link" href="#">Contact</a>
    </div>
  </div>
</nav>
htmlcssbootstrap-4

Answer №1

Indeed, you have the ability to adjust the background color of the Nav bar without encountering any issues. However, if you wish to alter the background color upon toggle click, you will need to incorporate a simple script for toggling a class on the navbar. This will allow you to modify the background color seamlessly.

$(document).ready(function(){
$('.navbar-dark > button').on('click', function(){
    $('.navbar-dark').toggleClass('color-changed');
});
});
.navbar-dark.color-changed{
background-color:grey!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>    
        </ul>
      </div>  
    </nav>

https://codepen.io/Vikaspatel/pen/QoaKOj

Answer №2

implement media queries to make it happen

@media (min-width: 434px) {
  .navbar-collapse{
  background-color: red;
  }  
}
@media (min-width: 768px) {
  .navbar-collapse{
  background-color: unset;
  }  
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <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 w-75 m-auto justify-content-around">
      <a class="nav-item nav-link active" href="#">About Us <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Products</a>
      <a class="nav-item nav-link" href="#">Specialties</a>
      <a class="nav-item nav-link" href="#">Contact</a>
    </div>
  </div>
</nav>

Answer №3

To change the color of the entire Navbar, not just the collapsed portion, use a media query that corresponds to the navbar-expand-md breakpoint...

@media(max-width: 768px) {
    .navbar.bg-light {
        background-color: red !important;
    }
}

Check out this link for more information.

Note that when using bg-light, you may need to add !important since the Navbar has no default color. You only need to use bg-light if you want the Navbar to have a color on larger screen widths.

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

"Encountering an issue when linking the file with phpMyAdmin

I've been struggling with this issue for hours now. I'm currently working on a registration form for my website and while coding in PHP, I connected it to MySQL and the Database using this line of code (which happens to be the 6th line): $mysq ...

phphtmlcss

Change the default content of the jQuery menu with a content changer

After sharing some base code for a webpage to dynamically change its content based on menu selections, I wanted to showcase the code. Take a look below: HTML: <!DOCTYPE html> <html> <head> <link rel='stylesheet' type=&apos ...

jqueryhtmlmenudefault

Exploring the foundations of web development with html and stylus

If you have experience with the roots platform, you are familiar with its default stack including jade, stylus, and coffee script. The documentation provides some information on using HTML, CSS, and pure JavaScript instead of the compiled languages, but d ...

javascripthtmlworkflowstylusroots-toolkit

What is the best way to update a canvas chart when the side menu is hidden?

I am facing an issue with the layout of my webpage, which includes a left side menu and a canvas chart. The left side menu occupies the first 155 pixels of the width, leaving the rest for the canvas chart set to a width of 100%. However, when I close the ...

javascripthtmlcanvas

How can I stack a div on top of two columns in Bootstrap?

My goal is to design something like this: I want to have a single-color strip that extends over three columns: https://i.sstatic.net/1XfAu.png What I am aiming for is a layout where the grey line overlaps columns 2 and 3. /* added by editor for demo p ...

htmlcssbootstrap-4

Is it possible to adjust the vertical background-position independently?

While creating a navigation bar using the <ul> element, I have come up with the following CSS code: .nav { list-style: none; background: url(/images/nav.png) no-repeat; width: 666px; height: 60px; } .nav li { font-size: 0px; backgr ...

htmlcssw3c

How can I add text to the title of a border using Bootstrap5?

I am attempting to create a design where text appears within the border of an element. I am currently utilizing Bootstrap 5 and jQuery for this project. Despite my efforts with fieldset and legend elements, I have not been successful in achieving the desir ...

htmljquerycsstwitter-bootstrapbootstrap-5

Guide to aligning 2 divs side by side using bootstrap

I have been experimenting with different methods like col-xs-6 for the first child, but I can't seem to get it right. How can I achieve this layout using only Bootstrap? Despite trying col-xs-6, I still haven't been able to place these divs next ...

cssbootstrap-5

Tips for adapting CSS images on mobile devices without distorting the aspect ratio

Our website is not responsive, and one of the requirements is to ensure that images render properly on mobile devices to fit the screen. However, we are encountering an issue due to the varying sizes of images uploaded to the web page. Below is the CSS co ...

cssresponsive-design

Issues with Bootstrap integration in Visual Studio causing problems

I'm encountering an alignment issue when using Bootstrap in Visual Studio, specifically with Bootstrap columns. When I use a div with the class col-md-4, it automatically adds some space to the right and doesn't align properly. However, when I wr ...

htmlvisual-studiotwitter-bootstrap-3

Display a text over a full-screen HTML5 video

Is there a way to display text on a fullscreen video in HTML? I have tried using absolute positioning for the text and relative/fixed/none positioning for the video, but it does not work when the video is in fullscreen mode. I also attempted to call the ...

javascripthtmlcssvideo

Forecasting text input demands

Many websites display suggestions in a drop-down menu as you type, some even showing a preview of the most likely result in a lighter-gradient font next to the cursor. For example, Spotlight on my Mac does this: https://i.sstatic.net/hDyxG.png Spotlight ...

htmlformsuser-interface

What is the most efficient way to substitute text within an HTML document?

Is there a way to switch between languages on a website to replace text on multiple pages with a simple button click? What is the most efficient method for achieving this? This code snippet only changes text in the first div. Is there a way to implement a ...

javascripthtmlcss

Is it possible to convert a .gif file into a jpeg image format for mobile display on my Gatsby website?

I'm looking to convert a .gif file into a mobile.png image for my Gatsby site, but I'm struggling to find the right resources. Does anyone have suggestions on how I can achieve this? Here is the frame: https://i.sstatic.net/IjYv4.png ...

javascriptcssreactjsgatsby

Choose all of the IDs from various sections using Jquery

I am facing an issue with having 2 identical IDs inside 2 separate sections. When the button is clicked, I want it to select the ID within this section and apply a style, then also select the ID in the other section and apply that same style. The code sni ...

htmljquerycss

- Challenges with internal systems

I have a dialog window where I want to display a confirm dialog when clicking Cancel. To achieve this, I am creating a div element with some text that should be shown in the confirm dialog. However, the issue I'm facing is that the text intended for t ...

javascriptjqueryhtmlcssmodal-dialog

Even though my performance in a sandbox environment is excellent, I am unable to obtain a token in a production environment

After posting my question on the Evernote developer forum, I was disappointed to find that the forum had been closed before I received a response. Even after receiving a proposal from an Evernote employee named chanatx to verify if my key was activated co ...

javascripthtmloauthevernotemonaca

Any suggestions for solving the issue of breaking the line at the end of a <td> within a <table> element using jQuery or JavaScript?

Here is a table format that I have: $(document).ready(function() { var enteredText = document.getElementById("textArea").value; var numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length; var characterCount = enteredText.length + numberOfLineB ...

javascriptjqueryhtml

Implement the maskmoney library in your input fields

In the form below, I am automatically adding inputs using a JavaScript function like this: $('.Preco1').maskMoney({ decimal: '.', thousands: ' ', precision: 2 }); $('.Preco1').focus(); $('#sub').maskMon ...

javascripthtml

Adjust text alignment of SVG elements using CSS

I am facing an issue where I am unable to change the x and y variables of Svg text tags using CSS. This should work as it does with Svg and . However, I am only able to make changes if I directly add the x and y positions in the HTML code. Html: <svg ...

htmlcsssvg