0

I am working with bootstrap for the first time and am having difficulty with the navbar toggle. How do you style the toggled menu? Any help would be much appreciated.

The html is as follows

<nav class="navbar navbar navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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 class="site-branding">
                     <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                 </div><!-- .site-branding -->
             </div>
            <div id="navbar" class="navbar-collapse collapse ">
              <ul class="nav navbar-nav">
                <header id="masthead" class="site-header inner" role="banner">        
                    <nav id="site-navigation" class="main-navigation" role="navigation">
                        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'mandurah' ); ?></button>
                        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
                    </nav><!-- #site-navigation -->
                </header><!-- #masthead -->
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
Joey
  • 3
  • 2
  • Show the CSS too. Or please make a fiddle. Or see a fiddle here http://jsfiddle.net/KyleMit/McHUc/. Although, your question is not clear enough and you didn't offered the whole informations. – Ionut Necula Oct 26 '15 at 08:01
  • @Joey: As you have used `wp_nav_menu()`, I think you are trying to customize a Wordpress theme, right? – Domain Oct 26 '15 at 08:05
  • Thanks fo replying. I must apologize for my lack details in the question. Perhaps if you were to take a look at the site, you would gain a clearer picture. Resize it to either tablet or mobile size and you will see it immediately. You can view it at this [link](http://mandurahblindcleaning.com/) – Joey Oct 26 '15 at 09:52

2 Answers2

1

It is a bit unclear what you're asking, but you will be using CSS for styling, you should go for the with following examples:

.navbar .navbar-collapse {
   background-color: #000;
}
.navbar .navbar-collapse > .nav > li {
   color: #ddd;
   font-weight: 700;
}

Inspect your website with your browser's inspector tool (or ther developer tool included, every web browser has some on stock) by right clicking your page and selecting the inspect from the dropmenu.

Pepelius
  • 1,576
  • 20
  • 34
0

When you call wp_nav_menu() it renders your navigation menu list.

In wp_nav_menu() you can pass number of arguments so that you can customize your navigation menu as you want. Click here to get details about wp_nav_menu.

menu-class - The class that is applied to the ul element which encloses the menu items. You have to specify here bootstrap class.

e.g.

$args = array(
'theme_location' => 'wdm_primary',
'fallback_cb'    => false,
'menu_class'     => 'nav navbar-nav navbar-right',
'walker'         => new My_Custom_Nav_Walker,
'depth'          => 1
);
wp_nav_menu( $args );

Try it, and let me know if you are facing any difficulties.

Domain
  • 11,562
  • 3
  • 23
  • 44
  • @Joey: [Here](http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp) is the Bootstrap example of toggle navigation. – Domain Oct 26 '15 at 08:24
  • thanks for the reply. I replied up top asking if you were open to viewing the website and then chnging the screen size to mobile, you would see the issue straight away. If you are ok to view it, the link is above. Thanks for your help so far – Joey Oct 27 '15 at 13:45