Bootstrap navigation menu in wordpress mobile view

Question

I have two navigation bar in my header and the center of it is my logo. I am using WordPress and also include the classes of bootstrap. I have a problem regarding in mobile view or something between max-width of 700+ pixels. My navigation menu got destructed when i make it below 700 pixels. I provided a screenshot to determine my problem.

Also here is my site: http://bxuwp.codebox.ph/

Here is the screenshot of my problem:

Here is my code:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">

    <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> 

    <div class="logo-wrapper">

        <div class="logo">
            <?php if ( get_theme_mod( 'm1_logo' ) ) : ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
            <?php else : ?>
                  <img class="logo" src="<?php echo get_bloginfo('template_url') ?>/images/qmark_logo.png"/>
            <?php endif; ?>
        </div>
    </div>

    <div class="half">      
        <ul class="left-navlist">
            <?php
            $args = array(
                  'container'      => 'div',
                  'container_class'   => 'collapse navbar-collapse pull-right',
                  'container_id'      => 'bs-example-navbar-collapse-1',
                  'menu'        => 'left',
                  'menu_class'        => 'nav navbar-nav',
                  'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                  'walker'            => new wp_bootstrap_navwalker()
            );
            ?>
            <?php wp_nav_menu($args); ?>
        </ul>
    </div>
    <div class="half">      
        <ul class="right-navlist">
            <?php
            $args1 = array(
                  'container'      => 'div',
                  'container_class'   => 'collapse navbar-collapse',
                  'container_id'      => 'bs-example-navbar-collapse-1',
                  'menu'        => 'right',
                  'menu_class'        => 'nav navbar-nav',
                  'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                  'walker'            => new wp_bootstrap_navwalker()
            );
            ?>
            <?php wp_nav_menu($args1); ?>
        </ul>
    </div>
    </div>
    </div>

Here is my little custom CSS for bootstrap navbar:

.navbar-fixed-top {
    min-height: 95px;
}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    background-color: #e1e1e1;
    color: #fff;
}
.navbar-inverse {
    border-radius: 0px;
    margin-bottom: 0;
    background-color: #e1e1e1;
    border-color:#e1e1e1;
    font-size: 16px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #e1e1e1;
    color: #993300;
}
.navbar-inverse .navbar-nav > li > a {
    color: #252525;
}
.logo-wrapper {
    text-align: center;
    margin-bottom: -65px;
}

.logo {
    margin-top: 5px;
    max-width: 80px;
    display: inline-block;
}
.half {
    width: 50%;
    display: block;
    float: left;
}

.right-navlist {
    padding-left: 60px;
}

.left-navlist {
    text-align: right;
    padding-right: 60px;
}

Alex Rindone · Answer 1 · 2016-10-21T16:28:11.360

0

You have a media query making the nav float left only on a minimum of 768px. Some browsers render pixels slightly differently so you may have noticed it's not exactly at 768px. Remove the query (or override it) and you will be fine!

@media (min-width: 768px) {
    .navbar-nav>li {
        float: left;
    }
}

Just an FYI though, you will have the same issue around 400px so you could make it so that your text is smaller at that window size. Basically, if the text stays that same size when it's a window size of 400px, the container of those elements is too small and bumps one of the containers down (Contact Us). Again, that's only happening right around 400px. You may want to give it alternative treatment instead like a hamburger icon controlling a nav that slides into view.

edited Oct 21 '16 at 16:28

answered Oct 21 '16 at 14:05

Alex Rindone

296
2
9

I didn't see on your site that you tried to override what I suggested or take it out. I'll send a screen shot showing it working for me when I modify your code in the inspect element – Alex Rindone Oct 21 '16 at 16:26
so basically you want to add `float:left;` in your `.nav > li { }` – Alex Rindone Oct 21 '16 at 16:29
sir i am at 407 x width. in screenshot is that 407 x width? thanks.. because it's not working in me – Jc John Oct 21 '16 at 23:49
I explained in my comment you probably have to do something different around 400px altogether style wise. The answer I gave you solves your question about why it wasn't staying floating to the left and dropped down, when you were in the 700px range. You will want to do something like this for around 400 px http://stackoverflow.com/questions/26317679/how-to-add-hamburger-menu-in-bootstrap – Alex Rindone Oct 22 '16 at 02:39

Bootstrap navigation menu in wordpress mobile view

1 Answers1