CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user3550879
user3550879

Reputation: 3469

Centering the toggle button in Bootstrap 3

I am using the default nav-bar (changed some aspects so renamed '.navbar-custom') supplied by bootstrap 3 in my wordpress theme.

It has the default 'toggle' in the right hand corner when screen is mobile-size. It has the '.navbar-brand'in the left.

I want the 'toggle' to center itself when in mobile mode. I would also like the '.navbar-brand' centred aswell (it would be great if I can get the toggle to go UNDERNEATH the site logo)

I have found examples that work in there jsfiddle but do not work for me. The only one with any visual result for me was (in media query)

.navbar-toggle {
width: 100%;
float: none;
margin: 0 auto;
}

but all this did was move the toggle to the left of the nav-bar. My code is the typical nag code but here it is

<header>    
        <nav class="navbar navbar-custom row" role="navigation">   
            <!-- Brand and toggle get grouped for better mobile display --> 
                <div class="navbar-header"> 
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="navbar-brand">
                    <?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
                        <a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>"  relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a>
                    <?php } else { ?>
                        <h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
                    <?php } ?>
                    </div>      
                </div> 

            <!-- Collect the nav links, forms, and other content for toggling --> 
                <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right"> 
                    <?php /* Primary navigation */
                        wp_nav_menu( array(
                        'menu' => 'top_menu',
                        'depth' => 2,
                        'container' => false,
                        'menu_class' => 'nav navbar-nav',
                        //Process nav menu using our custom nav walker
                        'walker' => new wp_bootstrap_navwalker())
                        );
                    ?>
                </div>
        </nav>

     <div class="row"> 
         <div class="col-md-12 col-xs-12">
            <h1>content</h1>
         </div>
     </div>

   </header>

Upvotes: 0

Views: 7767

Answers (3)

jayashan perera
jayashan perera

Reputation: 37

Without altering the design by hanging the width to 100%, center the toggle

.navbar-toggle {
    float: unset; 
    margin-right: 0; 
}

.navbar-header { 
    text-align: center; 
}

Upvotes: 0

user3553860
user3553860

Reputation: 11

Either:

.navbar-header { text-align: center; }

or:

.navbar-toggle {float: none; margin-right: 0; width: 100%; }

.icon-bar { margin-left: auto; margin-right: auto; }

Upvotes: 1

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Just keep your button inside one more div with class text-center

<div class="text-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>

EDIT :

You might want to check this below CSS

.navbar-toggle {
  width: 100%;
  float: none;
  margin-right: 0;
}

DEMO

Upvotes: 1

Related Questions