Customizing the Color Scheme of Dropdown Buttons in Bootstrap 4

I'm attempting to customize the button colors, but so far I've only been able to change them when hovering.

Below is my HTML and CSS where I define the color change on hover:

.nav > li > a:focus, .nav > li > a:hover {
       background-color: #00AEFE;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 
 
 
 <nav class="navbar navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Food, LLC</a>
    </div>
    <div>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="collapsable-nav" class="collapse navbar-collapse">
      <ul id="nav-list" class="nav navbar-nav navbar-right">
        <li><a href="#">Chicken</a></li>
        <li><a href="#">Beef</a></li>
        <li><a href="#">Sushi</a></li>
      </ul>
    </div>
  </div>
</nav>

htmljquerycsstwitter-bootstrapbootstrap-4

Answer №1

To modify the overall color scheme, you can simply remove the :focus and :hover styles (which are only active when the element is focused or hovered over).

.nav > li > a{
   background-color: #00AEFE;
}

An alternative approach:

.navbar-toggle {
     background-color: #00AEFE;
}

Keep in mind: This will only impact the styling of elements that contain the class "navbar-toggle".

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

Having difficulty with category level activation while implementing PHP page navigation with arrays and foreach loop

After receiving some excellent assistance from CBroe and @MeathCoder in a previous post, I managed to make some amazing changes. However, I'm currently facing an issue with setting the category as active. Here's the code snippet I'm working ...

phphtml

Overusing For Loops for Cloning in JavaScript

REVISED: (I have pinpointed the issue previously discussed in the comments) this is the code I am working with: <script type="text/javascript"> for(var i=0; i<5; i++){ $(".image-wrap").clone().appendTo(".container").attr(&apo ...

javascripthtmlcssgetelementbyid

What is the proper way to implement a foreach loop with a datalist in HTML?

Struggling to figure out how to create a dynamic drop-down datalist in HTML. I want the options in the drop-down menu to come from an array, rather than hardcoding them one by one. Unfortunately, when I test the code, the drop-down menu appears empty. As a ...

phphtml

Navigational menu utilizing hamburger icon in Bootsrap 4 framework

Currently, I am developing a website and have decided to utilize Bootstrap 4 for my project. My goal is to create a navbar layout that features a hamburger menu on the left side with additional navbar items positioned on the right. As the screen size decre ...

htmlcsstwitter-bootstrapbootstrap-4

Swapping Header and Footer in Kendo UI

My header and footer seem to be swapped, with the header appearing at the bottom and the footer at the top. I'm puzzled as this is a basic issue. Here is my code: <head> <title>kProduct Details</title> <link rel="sty ...

jqueryjquery-mobilekendo-uitelerikkendo-mobile

Expanding Tile Size in Grids Using CSS and JavaScript

I have a strong grasp of CSS and JS, utilizing jQuery for this particular project. The design includes a fluid grid made up of an unordered list with 'li' tags. Each tile has uniform width and height, adjusting to the browser window size by wrapp ...

javascriptjquerycssgrid

CSS guidelines for layering shapes and divs

Currently, I am in the process of developing a screenshot application to enhance my understanding of HTML, CSS, and Electron. One of the key features I have implemented is a toggleable overlay consisting of a 0.25 opacity transparent box that covers the en ...

javascripthtmlcsselectron

Best practices for making an AJAX call to fetch information from a database

I have a database containing a single table. The table includes columns for Company and Time, among others, with Company and Time being crucial. Users can make appointments by filling out a form. Within the form, there are 2 <select> elements - one ...

javascriptc#jqueryhtmlajax

Displaying JSON data received from an AJAX request on the screen

Our server is located in Europe. Occasionally, a user based in America reports an issue when using the $.getJSON function. Instead of passing the JSON response to JavaScript, the user's browser simply displays it. The AJAX call appears as follows: ...

javascriptjquerygetjson

Tips for incorporating an unordered list inside a list item

<li class="cate-item"> <button class="cate-label" >item 1 </button> <ul class="sub-categ"> <li> sub item 1</li> <li> sub item 2</li> <li> sub item 3</li ...

javascriptjquery

Anchor positioning within Firefox Mobile (for Android)

I created a homepage with multiple sections, each linked to from the main menu: <body> <header> <!-- nav used on all pages --> <a href="#nav" class="toggle-nav"> menu <i class="fa fa-bars">< ...

htmlcssfirefoxmobilecross-browser

Enhancing interactivity with jQuery's ajax event functionality

Alright, let me share my code with you: $("#content_Div").ajaxStart(function () { $(this).css('cursor', 'wait') }).ajaxComplete(function () { $(this).css('cursor', 'default') }); I'm facing a simple is ...

jqueryhtmlcssmouseevent

The placeholder tags in the input box are not aligning correctly with Bootstrap 3.2

Can someone help me figure out how to make the placeholders in my input box for the dates fit properly? I've been trying to adjust the bootstrap code but haven't been successful. I have attached a screenshot of the issue. Below is the code snip ...

htmlcsstwitter-bootstrap

CSS files imported from the node modules are mysteriously disappearing

Encountered a unique issue while attempting to import a CSS file from a node module. In the App.tsx file, the following imports were made: import './App.css'; // successful import '@foo/my-dependency/dist/foo.css' ...

csswebpackwebpack-dev-servercss-loader

Having a solid grasp of React and Material UI, as well as familiarity with the concept of props and

For my react application, I utilize Material UI (@mui/material). However, I've come to realize that there might be some nuances in how the components interact with each other. For instance, if I nest a MenuItem inside a Box or a Link inside a Typograp ...

javascriptcssreactjsmaterial-uistyling

jquery ajax not allowing record insertion

I am currently encountering an issue: I am attempting to insert records into the database using jQuery & Ajax. Unfortunately, despite trying to alert the inserted values, they do not display. I have also checked through the serialize function but have ...

phpjqueryajax

It appears that Wordpress is having trouble accurately mapping POST data

Let me explain the issue I am facing: I have a .php file embedded in my WordPress site that performs the following tasks: It contains a form that prompts the user to enter their NAME. Upon submitting the form, the data is posted to the same page (action ...

phphtmlwordpress

Transforming a jsonObject into a JavaScript array

I am working with a JSON object and I need to extract data from it to create an array. Here is an example of the desired array: ['city 1','city 2','city ..'] Below is the JSON output: {"\u0000*\u0000_data":[{"id": ...

javascriptjqueryjson

Issue with captcha loading in a popup window

Currently, I am utilizing jquery.load() to fetch a page upon clicking a button. The specific page involves a captcha feature, which seems to be causing the entire page to reload and not display anything. Interestingly, if I remove the captcha from the lo ...

asp.netjquerycaptcha

The color of the progress bar shifts according to its value

In my MySQL database, there is a field called progress_profile where I input values ranging from 1 to 100. $progress = $row['progress_profile']; Within the bootstrap-bar code, the following snippet is implemented: <p class="bioheading">P ...

bootstrap-4field