Having difficulty adjusting the color of the navbar in Bootstrap 4

I recently designed two navigation bars using bootstrap, but encountered an issue when attempting to change the background color of the second navigation bar. Despite following a tutorial video closely, the color did not update as expected. The main css file contained the code snippet for changing the background color, however, it did not have the desired effect. I suspect the discrepancy may be due to using a newer version of bootstrap compared to the one used in the tutorial video. Here is the code snippet that I inserted into the main css file:

   body{
     padding-top: 50px;
   }

   #mainnavbar{
      background-color: #CC0000;
   }

To troubleshoot this issue further, I revisited the tutorial video to ensure I did not miss any important details. The tutorial video that I followed can be found at the following link: https://www.youtube.com/watch?v=C1phgYAzIfg&t=1066s. Despite my best efforts, the background color of the second navigation bar remains unchanged. I will continue investigating and experimenting with different approaches to resolve this discrepancy.

Answer №1

To fix the issue, remove the bg-light class. This class has an !important modifier which is causing it to override your CSS. Instead, consider using either navbar-dark or navbar-light to specify the color scheme for the Navbar content. This will help you achieve the desired light or dark color for the links.

   <nav class="navbar navbar-expand-sm navbar-dark" id="mainnavbar"></nav>

   #mainnavbar{
      background-color: #CC0000;
   }

Check out the demo here:

Answer №2

Swap out the class bg-light for navbar-light

<nav class="navbar navbar-expand-sm navbar-light" id="mainnavbar">

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

Collapse all Bootstrap accordions with a single click of a button

Is there a simple way to toggle the collapse/expand functionality of all accordions with just one button click? I attempted to achieve this by using a basic button that would remove the 'active' class and add it back, but unfortunately, it didn&a ...

Trick for hiding CSS elements when input field is vacant

Is there a way to hide the search result when the input is empty? While everything is functioning correctly, I would like to prevent the search result from remaining visible after clearing the input field. For example, if you type 'A' and then d ...

What is the best way to ensure the default style is applied when validating?

input { background: white; color: white; } input:in-range { background: green; color: white; } input:out-of-range { background: red; color: white; } <h3> CSS range validation </h3> Enter your age <input type="number" min="1" max= ...

Ensure that the content inside the centrally aligned div is also aligned at the

Looking for a way to center a box on a website I'm designing? Instead of aligning it based on existing centering, use the following HTML / CSS code to ensure that the white box is perfectly centered on the page. .loading { position: fixed; z-in ...

Retrieve the chosen item from the autocomplete feature

Unfortunately, I have encountered an issue with this solution as I was unable to get it to work correctly in my code. The objective is to retrieve the selected item and then call another function to utilize it. The script is as follows: <script type=" ...

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

In a parent element, I have two child elements: <div id="registration"> <div id="left-panel"></div> <div id="right-panel"></div> </div> The styling is as follows: #registration{ @include l { flex-dire ...

Is there a compatibility issue between Vue particles and my project?

Greetings to all! I recently added Vue Particle to my Vue project, but encountered an issue while importing VueParticles in the Main.js file. Here is a snapshot from my terminal for reference. https://i.stack.imgur.com/Bxh2r.png ...

Breaking or wrapping lines in Visual Studio Code

While working in Visual Studio Code, I often encounter the issue of long lines extending beyond the screen edge instead of breaking and wrapping to the next line. This lack of text wrapping can be quite bothersome. I utilize a split-screen setup on my co ...

Count divisions using PHP and the LI function

I'm struggling with a loop that is responsible for displaying <li> elements, and I need to incorporate a new class into the first item, as well as every sixth subsequent <li> element. For example: while ($db_field = mysql_fetch_assoc($re ...

What is the best way to apply the CssClass "active" when clicking on a link

How can we update the cssClass of a link button on each click event, considering that the page refreshes every time? Currently, when I click on any LinkButton, the default behavior sets the cssClass to Plus LinkButton. ---index.aspx----------- <ul cl ...

Angular 6: Issue TS2339 - The attribute 'value' is not recognized on the 'HTMLElement' type

I have a textarea on my website that allows users to submit comments. I want to automatically capture the date and time when the comment is submitted, and then save it in a JSON format along with the added comment: After a comment is submitted, I would li ...

Enhance the v-autocomplete dropdown with a personalized touch by adding a custom

Currently utilizing the v-autocomplete component from Vuetify, and I am interested in incorporating a custom element into its dropdown menu. You can see the specific part I want to add highlighted with a red arrow in this screenshot: This is the current s ...

What is the best way to verify a v-if condition with an array in Vue.js HTML?

I am looking to dynamically add rows based on multiple options selected from a dropdown menu. When I select one option at a time, I am able to get the desired result. However, when I select multiple options, no rows are added. For example, if I select opt ...

My form does not trigger a 'Save Password' prompt in any browser

I have been struggling to get the browser to prompt a 'Save Password' while using the form below. Despite trying various solutions from different forums, nothing seems to work. Can anyone point out where I might be going wrong? Any help would be ...

Is there a way to extract the number from a b tag using selenium with Python?

I'm attempting to extract the numbers within all the <b> tags on this particular website. I am looking for each "qid" (question id), so I believe I need to utilize qids = driver.find_elements_by_tag_name("b"). Following suggestions fro ...

"Blank Canvas: Exploring the Void in Laravel Blade Templates

This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...

Move the scroll bar outside of the div and set it to automatically overflow

My issue involves a small div with the CSS property overflow:auto;. However, when the scroll bar appears, it covers up a significant portion of the div. One possible solution is to use overflow:scroll;, but this can result in an unsightly faded scroll bar ...

Troubleshooting: CSS3 transform issue unresolved

I'm attempting to add a 10-degree rotation to my menu items. While this CSS effect works in Firefox, I can't seem to get it to work in Chrome and Safari. I already know that IE doesn't support this particular CSS3 property, so that's no ...

Incorporate a dropdown selection option into a clickable Angular 6 table row using Bootstrap 4 styling

I am currently updating a financial account book that displays all available accounts in a table format. Each row provides essential details about a specific account, and when a user clicks on a row, Angular redirects them to a detailed view for that parti ...

Replacing HTML text with JSON data can be easily achieved by using JavaScript

After receiving data from an API and converting it into JSON format, I encountered difficulty when attempting to change a selected element in HTML. Every time I tried to do so, I either got 'undefined' or 'Object Object' as the output. ...