How to style Navigation & dropdowns

Bootstrap Studio Help
1

Hi, is there any documentation/instructions on how to style nav with dropdowns?

I’d like to have a background color on dropdown menus and a background color on hover for dropdown parent.

Thanks.

2

Not knowing your knowledge level, don’t shoot the messenger lol. A simple search on Google for tutorials on using CSS and some browsing through Bootstrap’s site should give you plenty of possibilities. Do remember to target the right things within the nav in order to edit them. The first parts of it can be pretty tricky for styling. There’s a bunch of threads on this forum on people asking about styling navs and dropdowns.

3

Something to get you started:


/*Set background of dropdown parent*/
.dropdown {
  background: var(--bs-dark);
}

/*Set color of dropdown parent and child links*/
.dropdown a{
  color: var(--bs-light);
}

/*Set the background of parent on hover*/
.dropdown:hover {
  background: var(--bs-secondary);
}

/*Set background of dropdown menu*/
.dropdown-menu {
  background:  var(--bs-dark);
}

/*Set color of dropdown child links if different from dropdown parent*/
.dropdown-menu a{
  color: var(--bs-warning);
}
4

If you add a class="red" , class="blue" or class="green" on the dropdown elements itself
Then you can have different colors on your dropdowns.
Choose your colors after your taste

CSS

.red .dropdown-toggle, .red .dropdown-menu, .red .dropdown-item {
  background-color: var(--bs-red);
  color: white;
}

.blue .dropdown-toggle, .blue .dropdown-menu, .blue .dropdown-item {
  background-color: var(--bs-blue);
  color: white;
}

.green .dropdown-toggle, .green .dropdown-menu, .green .dropdown-item {
  background-color: var(--bs-green);
  color: white;
}

.red .dropdown-item:hover {
  background-color: var(--bs-black);
  color: var(--bs-yellow);
}

.blue .dropdown-item:hover {
  background-color: var(--bs-black);
  color: var(--bs-yellow);
}

.green .dropdown-item:hover {
  background-color: var(--bs-black);
  color: var(--bs-yellow);
}
5

Here is an example

6

You can also use Bootstrap’s utility classes to quickly add the predefined theme colors to most components (although this may not be suitable for things like navigation links where you want the colors to change on hover.) You simply select the component and type the utility class name in the Attributes Panel in the Class Names field.

7

Thanks very much for all the suggestions good people. Very much appreciated.