0

I am trying to use WordPress with a bootstrap template, class navbar-fixed-top is conflicting with body_class();

Is there a workaround to this problem?

Edit 1:

Additional details,

I can't see the nav, thet's the main issue. I'm trying to use <?php body_class(); ?> to fix this up but no results.

can't see navbar

Here's the code upto nav:

<body id="page-top" <?php body_class(); ?>>

    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top affix">
        <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> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</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="#about">About</a>
                    </li>
                    <li>
                        <a href="#services">Services</a>
                    </li>
                    <li>
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <!-- a lot more code and -->
</body>

Here's the body tag from page after rendering:

<body id="page-top" class="home blog logged-in admin-bar no-customize-support">
5
  • 1
    Could you please tell me a bit more in detail exactly what is the conflict? Jun 28, 2017 at 8:31
  • Yes, there is more info required in order to help Jun 28, 2017 at 8:35
  • worpress's top black nav is covering my website's nav Jun 28, 2017 at 13:46
  • Hi, Welcome to WPSE! Unfortunately questions on here must be related to core WordPress development, and your question is about CSS and styling. These types of questions are off-topic here.
    – Johansson
    Jun 28, 2017 at 14:15
  • owh! So PHP stuff only?, not even wordpress related frontend questions? Jun 28, 2017 at 14:17

2 Answers 2

1

Why not use a navwalker to create your bootstrap menu? Try https://github.com/wp-bootstrap/wp-bootstrap-navwalker

You can get the fixed-top to add to the menu

<nav class="navbar navbar-default navbar-fixed-top" temscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">    
                        <?php
                            wp_nav_menu( array(
                                'menu'              => 'primary',
                                'theme_location'    => 'primary',
                                'depth'             => 2,
                                'container'         => 'div',
                                'container_class'   => '',
                                'container_id'      => 'collapse navbar-collapse',
                                'menu_class'        => 'nav navbar-nav',
                                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                                'walker'            => new wp_bootstrap_navwalker())
                            );
                        ?>
                    </ul>
                </div>
            </div>
0

The reason that the admin-bar and the navbar are overlapping is because they are both fixed to the top of the screen. There are two ways you can deal with this:

With PHP you can remove the admin bar. Add the following to your functions.php or in a standalone plugin:

add_filter( 'show_admin_bar', '__return_false' );

Or with CSS. Add this to your themes style.css or in the customizer:

.admin-bar .navbar { top: 32px; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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