Bootstrap navbar brand weight changes based on Safari dropdown

Question

A very unpleasant problem that I cannot understand. They only noticed in Safari that when I run the drop-down list in a fixed navbar, the font weight for ALL text in navbar changes, including brand text.

Here is a screenshot of navbar BEFORE

and after:

I have included below navigation text and custom CSS. Thank you for your help!

<!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="/">Midge Raymond</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="hidden-sm"><a href="/">home</a></li> <li><a href="/bio.html">bio</a></li> <li class="dropdown"> <a href="/books" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="500">books <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/books/mylastcontinent.html">My Last Continent</a></li> <li><a href="/books/forgettingenglish.html">Forgetting English</a></li> <li><a href="/books/everydaywriting.html">Everyday Writing</a></li> <li><a href="/books/everydaybookmarketing.html">Everyday Book Marketing</a></li> </ul> </li> <li class="dropdown"> <a href="/books" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="500">other writing <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/otherwriting/articles.html">Articles</a></li> <li><a href="/otherwriting/shortstories.html">Short Stories</a></li> </ul> </li> <li><a href="/news.html">news & events</a></li> <li class="hidden-sm"><a href="/blog">blog</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> 

And CSS:

 .navbar { min-height: 100px; padding-top: 15px; margin-bottom: 5px; padding-left: 0px; } .navbar-toggle { margin-top: 40px; } .navbar-brand { font-family: 'EB Garamond', 'Garamond', serif; font-size: 52px; margin-top: 15px; margin-bottom: 10px; text-align: center; font-weight: normal; } @media (max-width: 768px) { .navbar-brand { font-family: 'EB Garamond', 'Garamond', serif; font-size: 34px; } .navbar-toggle { margin-top: 15px; // Adjust toggle position } body { padding-top: 110px; } } .navbar-default .navbar-brand { color: #ffffff; font-weight: normal; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #488A87; background-color: transparent; } .navbar-default { background-color: #073949; border-color: #aaaaaa; } .navbar-default .navbar-nav > li > a { color: white; font-size: 17px; padding-top: 10px; } .navbar-inverse .navbar-brand { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover { background-color: #E5E5E5; } @media (min-width:1024px) { .navbar > .container { text-align: center; } .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li { float: none; display: inline-block; } .collapse.navbar-collapse { float: none; width: auto; clear: none; text-align: center; } } .dropdown-menu { background: #f9f9f5; } 

Answer 1

To fix this problem, you need to add the following to your CSS file. This is a font smoothing issue that occurs with position: fixed and Safari.

 .navbar-fixed-top { -webkit-font-smoothing: antialiased; } 

You can find more information about this fix and why this is happening here .

JSFiddle: https://jsfiddle.net/7njwmd1a/

Answer 2

try font-weight: normal! important;

A custom browser developer tool (press F12) to check which class is added / removed when you click on the drop-down list and probably this will help solve the problem.