Fix navbar-fixed-top with wordpress adminbar

archived 🗄
1

First off add

body {
 padding-top: @navbar-height + 1px; // +1 or how thick your .navbar-fixed-top border is.
}

to > theme/assest/less/app.less

then add

<?php if ( is_admin_bar_showing() ) {?>
 <style>
  .navbar-fixed-top { top: 46px !important; } /*wordpress adminbar height small screen */
   @media (min-width: 768px) {
    .navbar-fixed-top { top: 32px !important; } /*wordpress adminbar height big screen */
   }
 </style>
<?php
}?>

to > theme/templates/head.php

learned from dotnordic.se

2

Thanks for this, bothered me long time!

3

Using the following in your app.less works without inline styles:

body.admin-bar {
    .navbar-fixed-top {
        // reserve space for the admin bar
        top: 32px !important;
    }
}

Add changes for other media queries as you like.

4

Even better! Thanks!