Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't redefine font-size of BootStrap's dropdown-menu class

I'm having the hardest time trying to redefine the font-size of BootStrap's .dropdown-menu class.

The Firefox inspector says it's from .dropdown-menu (inherited from ul), so I tried ul.dropdown-menu, .dropdown-menu but with no luck.

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header"></div>
        <div id="myMenu" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>First list item</li>
                <li id="my-messages" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages</a>
                    <ul class="dropdown-menu pull-right" aria-labelledby="dLabel" role="menu">
                        <li>Dropdown list item</li>
                        ...

Any advise? Thanks.

like image 548
user3442612 Avatar asked Nov 14 '14 14:11

user3442612


People also ask

What is Bootstrap's global default font-size?

Bootstrap's Default Settings Bootstrap's global default font-size is 14px, with a line-height of 1.428.

How do I change the default font-size in bootstrap?

If you are tied to v3, I would recommend changing that value to 1rem , and then setting html {font-size: 14px} as in the example above. This is the best way. Bootstrap 4 will magically size like v3 once you change this to 14px.

What is the font-size of h3 in bootstrap 4 by default?

Bootstrap 4 Default Settings Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5. The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif. In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

What is bootstrap dropdown?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.


1 Answers

Looks like you're using it in conjunction with a nav?

I was able to do this with the nav and a bit of CSS.

BOOTPLY

CSS:

.navbar-nav > li {
  font-size: 20px;
  }
.dropdown-menu {
    font-size: 20px;
  }
like image 74
MattD Avatar answered Oct 11 '22 19:10

MattD