0

I'm trying to develop a theme with a sticky navbar but the problem is the admin bar of wordpress covers my sticky navbar that is made using bootstrap. help please. this is my navbar code:

<!-- Fixed navbar -->
    <nav class="navbar navbar-custom navbar-fixed-top" id="nav-nav">
      <div class="container">

          <a class="navbar-brand" href="#"><?php bloginfo('name');?> </a>

        <div id="menu" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
           <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                'walker'            => new WP_Bootstrap_Navwalker())
            );
        ?>
          </ul>
            <!-- search form-->
            <i class="fa fa-search search-top"></i>
                  <div class="search-form-top">
                     <?php get_search_form(); ?>
                 </div>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
  • The question is quite specific to WordPress, as evidenced by Chandra's answer — the solution involves using the "logged-in" body class that WordPress adds automatically. Additionally, Shadi's question is about developing their own WordPress theme, not support for a third party developer's plugin or theme. – ElmerCat Jan 31 '18 at 2:06
1

You can try this code with add in functions.php file of your current's theme:

add_action('wp_head', 'my_wp_head');
function my_wp_head(){
    echo '<style>'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 46px !important; }'
    .PHP_EOL
    .'@media only screen and (min-width: 783px) {'
    .PHP_EOL
    .'body{ padding-top: 70px !important; }'
    .PHP_EOL
    .'body.body-logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'body.logged-in .navbar-fixed-top{ top: 28px !important; }'
    .PHP_EOL
    .'}</style>'
    .PHP_EOL;
}
| improve this answer | |
  • still now working? – shadi Jul 31 '17 at 11:48
  • it works thank you , the problem was you did some css to classes i did not have that's why it did not work at first. so the solution was to add some php codes beside yours so this classes appears i have found the solution here:wordpress.stackexchange.com/questions/87717/… – shadi Jul 31 '17 at 22:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.