How do you change styling of dropdown menu items in Bootstrap 4?

HTML & CSS
1

I’m still fairly new to Bootstrap 4 and am having problems with menu styling, though it’s possible that my difficulties are actually caused by an imperfect understanding of CSS. I’m using Bootstrap 4.5.2.

In the example of navbar coding shown below, I can adjust the vertical spacing of the primary menu items (Home, About Us, Contact) by using something like .navbar-nav li a {padding: 10px 0 0 0;} in my CSS. However, all my attempts to adjust the padding of the dropdown menu items (Meetings, Subscriptions, History) have had no effect.

Any suggestions of how to do this would be very welcome.

It would also be useful to know how to adjust the horizontal position of the dropdown menu on wider screens where the full menu is visible at the top of the page. In some cases, this is being truncated on the right hand side by the edge of the browser window and so I want to shift it to the left.

    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <!-- Brand -->
        <a class="navbar-brand" href="/Default.aspx">
            <img id="logo" alt="Logo" src="Images/MyLogo.svg">
            <span>Society Name</span>
        </a>

        <!-- Toggler/collapsible Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
                <!-- Dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop"
                       data-toggle="dropdown">
                        About Us
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Meetings</a>
                        <a class="dropdown-item" href="#">Subscriptions</a>
                        <a class="dropdown-item" href="#">History</a>
                    </div>
                </li>
                <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
            </ul>
        </div>
    </nav>
2

The rule above does affect the dropdown styling but you probably don’t want it to :slight_smile:

Use the child selector to limit it to the first level and then use the class on the dropdown-item to style the submenu.

e.g.

/* top level*/
.navbar-nav > li > a {
  padding: 10px 0 0 0;
}
/* dropdown item */
.navbar-nav a.dropdown-item {
  padding: 5px 10px;
}

3

Hi Paul,
Many thanks for putting me right on what I suspect are basic principles of CSS selection rules. I had already tried something almost identical, but with a space after the a. That doesn’t work.

.navbar-nav a .dropdown-item

In contrast, your solution does the job perfectly.

Have you any equally useful suggestions for my second question about shifting the dropdown menu sideways (or preventing it from being truncated in the first place)?

1 Like
4

A space is a descendant selector and you don’t want a descendant in that scenario :slight_smile:

If you are placing drop downs near the right edge of the viewport then probably best to use the bootstrap built in right alignment of the dropdown rather than trying to magic number guess a width that might fit.

Add the class dropdown-menu-right to the existing dropdown-menu class.

i.e.

  <div class="dropdown-menu dropdown-menu-right">
           <a class="dropdown-item" 
etc....

That will align the right edge of the menu to the right of the trigger button.

I’ve updated the codepen.


(Click Edit on codepen to see full size)

1 Like
5

Thanks again, Paul. You are a star!

I had previously only looked for guidance about this topic in the BS4 navbar section on w3schools.com/bootstrap4 and hadn’t noticed that they also have a section called BS4 Dropdowns, which is where they mention dropdown-menu-right, etc.

1 Like
6

I have a follow-up question about navbar styling.

The website I am currently working on has a logo in navbar-brand and I have deliberately made this logo project beyond the bottom of the navbar.

When I shrink the width of the browser window to simulate operation on a mobile phone, the normal horizontal navbar menu is replaced by a vertical menu, which overlays the bottom section of my logo. However, when I fix this as shown below, it also adds padding to the horizontal menu items.

Is there any way to limit my CSS to the vertical version of the menu?

.navbar-collapse {
    padding-top: 15px;
}
7

If you only want that rule to apply when the hamburger shows then put it inside a media query.

@media screen and (max-width: 767px) {
  .navbar-collapse {
    padding-top: 25px;
  }
}
8

Doh! I’m already using similar media queries in the same stylesheet, so I should have thought of that.

Thanks yet again for your help.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.