Bootstrap Navbar-Brand Text not shrinking

Question

Bootstrap Navbar-Brand Text not shrinking

1.6k Views Asked by Fearghal At 03 April 2025 at 06:32

My Brand is a string which i want to inflate the font size in md and large screens.

I tried the following CSS override in my CSS file but sadly it is ignored. I do not want to use px based if statement to do this. Anybody know what to do?

    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
        <title>my site</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-modal-carousel.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/mycss.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
        <script src="js/bootstrap.min.js">
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </head>
<body>
            <div class="row row-top">
                <div class="col-sm-8 col-md-offset-2">                 
                  <nav class="navbar navbar-default">
                      <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                          <a class="navbar-brand" href="/home.html">my brand goes here and here</a>

                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                          <ul class="nav navbar-nav navbar-right">
                            <li><a href="/projects.html">Projects </a></li>
                            <li><a href="/services.html">tab2</a></li>
                            <li><a href="/aboutus.html">tab3</a></li>
                            <li><a href="/contactus.html">tab4</a></li>
                          </ul>
                        </div><!-- /.navbar-collapse -->
                      </div><!-- /.container-fluid -->
                    </nav>
                </div>
            </div>

css code

@media (max-width: @screen-xs) {
        .navbar-brand {
        font-size:15px;
        }

}

@media (max-width: @screen-sm) {
            .navbar-brand {
        font-size:20px;
        }

}

@media (max-width: @screen-md) {
            .navbar-brand {
        font-size:30px;
        }

}
@media (max-width: @screen-lg) {
            .navbar-brand {
        font-size:50px;
        }

    }

Original Q&A

There are 1 best solutions below

**Bass Jobsen** · Answer 1

You are using max-width in your media queries. So the following Less code:

@media (max-width: @screen-lg) {
            .navbar-brand {
        font-size:50px;
        }

    }

Compiles into CSS as shown beneath:

@media (max-width: 1200px) {
  .navbar-brand {
    font-size: 50px;
  }
}

The preceding means that when your screen is wider than 1200px your font-size: 50px is not applied. And for screen smaller than 1200px @media (max-width: 1200px) evaluate always true! So indeed your font won't be smaller.

When using max-width you should start with the largest wide:

@media (max-width: @screen-lg) {}
@media (max-width: @screen-md) {}
@media (max-width: @screen-sm) {}
@media (max-width: @screen-xs) {}

Alternatively notice that Bootstrap's code works mobile first, see also http://getbootstrap.com/css/#grid-media-queries. First define the style rules without any media query (default) then define the next wide by using min-width, etc.

If you want to set a max-width you can use:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Notice the @media for the largest screen has no max-width set.

You can try the use the following Less code:

@import "less/variables";
@import "less/mixins";

navbar-brand {
font-size:15px;
}

@media (min-width: @screen-sm) {
            .navbar-brand {
        font-size:20px;
        }

}

@media (min-width: @screen-md) {
            .navbar-brand {
        font-size:30px;
        }

}
@media (min-width: @screen-lg) {
            .navbar-brand {
        font-size:50px;
        }

    }

The above code compiles into CSS as follows:

navbar-brand {
  font-size: 15px;
}
@media (min-width: 768px) {
  .navbar-brand {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  .navbar-brand {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  .navbar-brand {
    font-size: 50px;
  }
}

Demo: http://www.bootply.com/gMEHaCpSCB

Bootstrap Navbar-Brand Text not shrinking

There are 1 best solutions below

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in LESS

Related Questions in NAVBAR

Trending Questions

Popular # Hahtags

Popular Questions