Tips for updating the background color of a dropdown menu in the navigation bar

I am attempting to increase the size of the dropdown menu and change its background color. Currently, I can only modify the color of the links and the surrounding area.

.navbar a {
          width: 125px;
          text-align: center;
          color: rgb(173, 173, 173);
      }

      .nav-link:hover {
          color: rgb(238, 176, 94);
      }

      .dropdown-menu .dropdown-item {
          text-align: left;
          background-color: aqua;
      }

      .dropdown-menu a {
          color: rgb(48, 58, 78);
          background-color: aqua;
      }

      .dropdown-menu>a:hover {
          background-image: none;
          background-color: rgb(255, 255, 255);
          text-align: center;
      }
<!-- Bootstrap-4 + Fontawesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c719673ce3.js" crossorigin="anonymous"></script>

<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="Home.html">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> My Projects</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="Python.html">Python</a>
          <a class="dropdown-item" href="PixelArt.html">Pixel Art</a>
          <a class="dropdown-item" href="Website.html">Websites</a>
          <a class="dropdown-item" href="raspi.html">Raspberry Pi</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Portfolio.html">My Portfolio</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

This is the dropdown menu. I aim to fill in the white space with color and enlarge the dropdown menu. What steps should I take to achieve this?

https://i.stack.imgur.com/DQcI1.jpg

htmlcssbootstrap-4

Answer №1

Within your script

.dropdown-menu .dropdown-item {
text-align: left;
background-color: aqua;
}

You have included a styling that sets the background of .dropdown-item to an aqua color. To achieve a white background using rgba(0,0,0,1), simply remove the background-color:aqua declaration. Additionally, adjusting the width property in your CSS can alter the size of your dropdown menu.

Answer №2

if you're looking to give your website a fresh look with aqua background


.dropdown-menu .dropdown-item {
   text-align: left;
   background-color: aqua;
}

.dropdown-menu a {
   color: rgb(48, 58, 78);
   background-color : aqua;
}

if you prefer a clean and modern design with white color scheme

.dropdown-menu .dropdown-item {
   text-align: left;
   background-color: #fff;
}

.dropdown-menu a {
   color: rgb(48, 58, 78);
   background-color : #fff;
}

Answer №3

To change the background color, simply add a rule for .dropdown-menu inside a .nav-item

.nav-item .dropdown-menu {
  background-color: aqua;
}

This selector is specific enough to customize the style of .dropdown-menu in Bootstrap.
You can then make the .dropdown-items fill the width of the .dropdown-menu:

.dropdown-menu .dropdown-item {
  /* ... */
  width: 100%;
}


.navbar a {
  width: 125px;
  text-align: center;
  color: rgb(173, 173, 173);
}

.nav-link:hover {
  color: rgb(238, 176, 94);
}

.nav-item .dropdown-menu {
  background-color: aqua;
}

.dropdown-menu .dropdown-item {
  text-align: left;
  width: 100%;
}

.dropdown-menu a {
  color: rgb(48, 58, 78);
}

.dropdown-menu>a:hover {
  background-image: none;
  background-color: rgb(255, 255, 255);
  text-align: center;
}
<!-- Bootstrap-4 + Fontawesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabea4bfa4b9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c719673ce3.js" crossorigin="anonymous"></script>


<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="Home.html">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                  My Projects
                </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="Python.html">Python</a>
          <a class="dropdown-item" href="PixelArt.html">Pixel Art</a>
          <a class="dropdown-item" href="Website.html">Websites</a>
          <a class="dropdown-item" href="raspi.html">Raspberry Pi</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Portfolio.html">My Portfolio</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454203a213a27">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

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

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

pythonjquerycssseleniumautomated-tests

The integration of a Bootstrap modal within the side bar's rendering

Struggling with a modal appearing inside my side div and can't find any solutions in the bootstrap5 documentation or online forums. https://i.stack.imgur.com/gHsBi.png I just want the modal to display centered on the page with the background fade ef ...

javascripthtmlcssbootstrap-modalbootstrap-5

The issue of bootstrap-multiselect being clipped under a kendo window has been causing

I am encountering an issue with my kendo window while using the bootstrap multiselect dropdownlist inside it. When I try to select something from the dropdown list, the dropdown-menu is getting clipped under the window and I cannot see all the options. Ev ...

csstwitter-bootstrap-3bootstrap-multiselectkendo-window

All you need to know about the jQuery .css method

I've been struggling to get this script to function properly. Despite searching online, I haven't been able to find a satisfactory solution. $( document ).ready(function() { $("#container").click(function(){ var color = $(this).css("backgro ...

jquerycss

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

htmlcsscss-grid

Differences between addEventListener and jQuery's on method, as well as form.submit and jQuery's

I encountered a situation where callbacks registered using jQuery's on method were not being called when trying to trigger form submission with the HTML Form element object instead of jQuery. After some testing, I discovered that changing the code to ...

javascriptjqueryhtmldom-events

Manipulating CSS content property in React using Material UI

I am trying to set content: "" on my i element: "& i::before": { content: "" }, "& i::after": { content: "" }, However, the style is not being applied and I am seeing an ...

cssreactjsmaterial-ui

Engaging with JSON data inputs

Need help! I'm attempting to fetch JSON data using AJAX and load it into a select control. However, the process seems to get stuck at "Downloading the recipes....". Any insights on what might be causing this issue? (Tried a few fixes but nothing has w ...

javascripthtmljson

Managing the AJAX response from a remote CGI script

I'm currently working on a project that involves handling the response of a CGI script located on a remote machine within a PHP generated HTML page on an apache server. The challenge I am facing relates to user authentication and account creation for ...

javascriptphphtmlajax

Set default values for input fields based on selected options in php and mysql

I need help creating a form that will submit details when an option is selected from a database. The MySQL table has the following fields under USERS : [email], [age], [name]. I want to automatically fill in the values of other input fields when a user s ...

phpjqueryhtmlmysqldrop-down-menu

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Is it feasible to divide a list into two columns using pure CSS if there are more than 5 child <li> elements? In the scenario I have in mind, this is the desired outcome: <li>1</li> <li>2</li> <li>3</li> ...

csssass

What is the reason that the CSS3 property name 'filter' is not recognized in Windows 8 applications?

I'm in the process of adapting my own codepen for a Windows 8 desktop app. Everything runs smoothly on Codepen, with the exception of some CSS adjustments from -webkit- to -ms-. However, I encountered an issue regarding this specific line in the CSS s ...

htmlcssvisual-studio-2012svgwindows-8

The width of the Div element is not following the specified dimensions, and it also has an unspecified margin

Check out my code snippet at: http://jsfiddle.net/8z4aw/ I'm trying to create a table-like layout using div elements, but for some reason the browser is not respecting the specified widths and seems to be adding an unwanted right margin. Where is thi ...

htmlcss

Populate User Interface Popover - Placement on Compact Display

I have been grappling with finding a solution to position the material ui popover beneath my anchor consistently, even on smaller screens. Take a look at this sandbox example. The current setup is working alright, but the issue is that the scroll is cont ...

cssreactjsmaterial-ui

Deciphering HTML encoding for text fields

As I transition from the Microsoft stack, specifically WPF, to HTML5, I apologize for any beginner-level questions. Today's topic is HTML encoding and decoding. Imagine an HTML5 application making AJAX calls to a C# backend using HTTP. The server al ...

javascriptjqueryhtmlencodingtextbox

Make IE10 HTML page use IE Quirks mode

Assist me, I'm battling with Internet Explorer. We have a series of pages that function well in IE8 (on our intranet). The company has made the decision to upgrade directly to IE10. What is the HTML code needed to force a page to use IE5 Quirks Mode ...

htmlinternet-explorer

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect

The information is not appearing in the dropdown menu

The select tag for chapters is not displaying the result from the query properly. Instead of showing in the select tag, the chapter names are being displayed as echo statements. <!doctype html> <html> <head> <meta charset="utf-8"> ...

javascriptphphtmlsqlselect

Which internet browsing engine does Android leverage for phonegap applications?

Currently, I'm working on incorporating CSS animations into a phone gap project. Surprisingly, the animations work flawlessly on an iOS device but encounter issues on my Android device. Strangely, elements like dashed borders are not even showing up. ...

csscordova

I am struggling to make php redirect work using onclick() function

My PHP button is not redirecting properly. Assuming the page destination is correct, is there anything else that could be causing this issue? echo "<button id=\"create\" onclick=\"location.href('/team/teams.php?op=create');&bso ...

javascriptphphtmlredirectonclick