bootstrap mobile menu button goes off-screen on phones

1 Views

I have a Bootstrap site, in local development, where the navbar works perfectly at every size (down to 320px wide) on a desktop if you resize the browser window. But if you use the browser’s device emulation, or look at the pages on an actual mobile phone, the “hamburger” menu button goes off screen to the right, and you have to scroll right to see it. I literally spent the entire afternoon googling and tweaking every style I could think of, with no change whatsoever. I’m hoping someone else has come across this problem.

Three notes:
(1) some of the menu styling (left positioning in particular) may look/be odd, but was needed to keep the menu on screen at very narrow widths. Removing that positioning doesn’t help the situation.
(2) I have a split header where I’m specifying XS-6 for both left and right — technically I think all rows are supposed to be full 12-column width at the mobile XS size, but again…changing this didn’t change the problem at all — it just went off-screen on row two, instead.
(3) It’s a wordpress site, and I’m using wp_bootstrap_navwalker.

Read More

Here’s my HTML & CSS… Suggestions? 

.container{width:auto;}

.navbar-default .navbar-toggle {border-color:#4B4F5B;padding:5px;margin-top:23px;margin-right:10px;}

.navbar-default .navbar-toggle .icon-bar{background-color:#4B4F5B;}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color:#fff;}

.navbar-collapse {border-top:1px dotted #4B4F5B;position:relative;left:-10px;}

.navbar-collapse.in {overflow-y: visible;}   /*show overflow to avoid submenu scrolling*/

#menu-menu1 {position:relative;left:-35px;}

.dropdown-menu {position:relative;left:-70px;}

#header_left {margin:0;padding:0;}

#header_right {margin:0;padding:0;}
	<!-- HEADER / NAV -->
    <header class="row navrow">
    	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- LEFT SIDE -->
                <div class="col-xs-8 col-sm-12 col-md-4 col-lg-4" id="header_left">
                    <a class="brand" href="<?php echo site_url(); ?>"><img src="/myPath/logo.png" alt="myLogo" id="brand"/></a>
                </div><!-- end LEFT -->
                <!-- RIGHT -->
                <div class="col-xs-4 col-sm-12 col-md-8 col-lg-8" id="header_right">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                            <span class="sr-only">Toggle Navigation Menu</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div><!--end navbar-header-->
                    <div class="collapse navbar-collapse" id="collapse">                
                        <?php /* Primary navigation */
                            wp_nav_menu( array(
                            'menu' => 'top_menu',
                            'depth' => 0,
                            'container' => false,
                            'menu_class' => 'nav-pills',
                            //Process nav menu using navwalker
                            'walker' => new wp_bootstrap_navwalker())
                            );
                        ?>
                      
                    </div><!--end collapse-->
                </div><!--end RIGHT-->
            </div><!--end container-->
        </nav><!-- end NAV -->
	</header><!--end HEADER-->
Post Views: 1

Related posts

2 comments

  1. Turns out the whole body had about 100px of horizontal scrolling space off to the right, on mobile only — no idea why, but I’m not the only one who has seen this happen.

    What fixed it for me (thanks to this post: White space showing up on right side of page when background image should extend full length of page) was adding this seemingly harmless style to html/body:

    html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

    Hopefully that helps others in the same situation. I know you’re out there!

  2. I have to mention that as of Bootstrap 3.5+, I only needed to set the overflow:

    html,body
{
    overflow-x: hidden; 
}

Comments are closed.