0

I have integrated the bootstrap Navbar with my Wordpress theme I am developing. However my menu is squished together and there is no spacing or design within the ul & li tags. I have tried everything possible to make this work properly with bootstrap but I am lost.

Can anyone point me in the right direction to fix this issue or possibly give me a solution? Thank you for any help.

live site: https://publifiedlabs.com/sandbox-theme/

Here is my block of code

           <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="<?php echo home_url( '/' ); ?>">
                    <img src="https://publifiedlabs.com/wp-content/uploads/2016/04/main-logo.png" alt="<?php //get alt tag for image ?>">
                    </a>
                </div> <!-- ./navbar-header -->
                    <div class="search-form-container">
                    <?php get_search_form(); ?>
                </div>
                <!-- Begin wp_nav_menu -->
                        <div class="navbar navbar-nav float-md-right" id="navbarSupportedContent">
                        <?php   // This brings in the menu in the proper style with bootstrap
                                    wp_nav_menu( array(
                                        'theme_location'    =>'primary',
                                        //'depth'             => 2,
                                        'container'         => '',
                                        'fallback_cb'       => '',
                                        //'menu_class'        => 'navbar-nav mr-auto',
                                        'items_wrap'        => '<ul class="navbar-nav">%3$s</ul>',
                                        'walker'            => new pbf_walker_nav_primary(),
                                        'echo'              => true
                                        ) 
                                    ); ?>
            </div> <!-- /.container-fluid -->
        </nav>

Here is the outputed HTML:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="https://publifiedlabs.com/sandbox-theme/">
                            <img src="https://publifiedlabs.com/wp-content/uploads/2016/04/main-logo.png" alt="">
                            </a>
                        </div> <!-- ./navbar-header -->
                            <div class="search-form-container">
                            <form role="search" method="get" action="https://publifiedlabs.com/sandbox-theme/">
    <input type="search" class="form-control" placeholder="Search" value="" name="s" title="Search">
</form>                        </div>
                        <!-- Begin wp_nav_menu -->
                                <div class="navbar navbar-nav float-md-right" id="navbarSupportedContent">
                                    <ul class="navbar-nav"><li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item active menu-item-16 nav-item"><a href="https://publifiedlabs.com/sandbox-theme/">Home</a></li>
    <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-15 nav-item"><a href="https://publifiedlabs.com/sandbox-theme/about-us/" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
    <ul class="dropdown-menu depth_0 nav navbar-nav">
        <li id="menu-item-35" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35 nav-item"><a href="#">Contact</a></li>
    </ul>
    </li>
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 nav-item"><a href="https://publifiedlabs.com/sandbox-theme/blog/">Blog</a></li>
    </ul>                    </div> <!-- /.container-fluid -->
                    </div></nav>

Image of Menu Issue: enter image description here

Andrew Lee
  • 304
  • 5
  • 14
  • 1
    Have you checked your css? Try to reposition or resize that way? – PaulMcF87 Dec 04 '17 at 22:38
  • I am trying to rely purely on the default css settings from bootstrap. I am guessing bootstrap should be able to take care of this issue. – Andrew Lee Dec 04 '17 at 22:41
  • 1
    As far as I am aware, that is the bootstrap version and if it doesn't fit, you will need to amend the css to override. If you have amend the original menu or added anything to it, you should need to account for that with custom css. – PaulMcF87 Dec 04 '17 at 22:48
  • ahh, icic. I will try switching to an older version of bootstrap to see if this solves the issue. Thanks. – Andrew Lee Dec 04 '17 at 22:49
  • If I am correct, when you got the code for the menu, it would have contained some php, some custom css and some links to call the bootstrap css? If so, your problem wont be with the bootstrap css as that is designed to make the template responsive. It probably lies with the css code that came with the template you got. That css code would have been added by the person who designed the menu and its not bootstrap. – PaulMcF87 Dec 04 '17 at 22:53
  • Thanks @PaulMcF87. You pointed me in the right direction. I will create a custom css now. – Andrew Lee Dec 04 '17 at 22:55
  • Yes, I feel dumb for not realizing that bootstrap initiates the functionality and not the design. I will be creating a style for my theme. – Andrew Lee Dec 04 '17 at 23:19

2 Answers2

0

In your first code example delete navbar-expand-lg from this

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

Now it looks like this

miknik
  • 5,748
  • 1
  • 10
  • 26
0

Below is the answer to the problem from this post.

All I did was add the piece of code below in my functions.php file.

// This controls the <a></a> class
function add_menuclass($ulclass) {
    return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
 }
 add_filter('wp_nav_menu','add_menuclass');

Reference Link: How to add class to link in wp_nav_menu?

Andrew Lee
  • 304
  • 5
  • 14