I have copied the Bootstrap Default Navbar code to a T http://getbootstrap.com/components/#navbar-default

However it's not working and i just need a simple dropdown nav for my mobile viewport size.

Since chrome only allows down to 400px browser re-sizing I have set the media query to work on that min-width: 400px.

Here is the site (i'll leave live for a few days in order to allow inspection of the code).

But the reason i'm unsure about where to start is because i suspect a few culprits:

1) By default WordPress calls it's own copy of jquery if it's not included, but so does bootstrap.min.js so i'm not sure if there is a conflict there and if so how to resolve it

2) Don't know how to check if jquery is being called in Chrome DevTools on the Networks tab so i'm further unable to figure it out. On the server i see that bootstrap.min.js is indeed within the JS folder in the my custom theme but when i explore in DevTools the bootstrap.min.js file is NOT inside the themes JS directory (major head scratcher).

3) The way WP abstracts stylesheets and scripts could be a cause but here is how i have them right now

// Load the Theme JS

function theme_js() {

  wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );
  wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );


add_action( 'wp_enqueue_scripts', 'theme_js' );

add_action( 'wp_enqueue_scripts', 'theme_styles' );

So i'm pretty sure that should be calling jquery through Bootstrap but i could be wrong. Also it is worth noting that in order for the mobile menu (burger menu/stack menu/ whatever you want to call that menu icon with three parallel horizontal lines) to work it needs to have the collapse.js script included which in BS's site it claims it is included in the boostrap.min.js file, really all you need is that one JS file.

But as you can see here (please reduce your browser window to atleast 400px wide) http://dcinsideout.com/ when the menu is clicked nothing happens, it won't reveal the collapsed div and i'm kinda new at JS so i'm not very good at debugging it yet.

I did open the console and tried applying a .toggle() method to the button class but that didn't work it returned a TypeError undefined is not a function.

So i'm really confused at this point this should be a pretty simple cut and dry mobile nav menu but it's been pretty complicated.

Here is the markup i have for the menu, NOTE: my menu is being called through the PHP script which shouldn't make a difference.

<div class="container-hdr-home-mobile">

        <div class="row">

          <header class="col-hdr">

            <div class="logo"></div>

            <nav class="navbar navbar-default" role="navigation">

              <div class="container-fluid">

                <div class="navbar-header">

                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dcMobileNav">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  <!-- <a href="#" class="logo navbar-brand"></a> -->
                <!-- /navbar-header -->
                <div class="navbar-collapse collapse" id="dcMobileNav">
                  <ul class="nav navbar-nav">

                      $args = array(
                        'menu' => 'main-menu'

                      wp_nav_menu( $args );

                  <!-- /navbar-collapse -->
              <!-- /container-fluid -->

            <h1 class="homeHeroText">Explore a<br>Neighborhood</h1>
            <h3 class="h3-2">Hover over map to explore</h3>

            <?php get_template_part( 'content', 'cirnav' ); ?>
        <!-- end row -->
      <!-- end container header home mobile -->

I also commented out the BRAND link as i just decided to use my own div with a logo class, again not something that should hinder the menu from working.

Any help, advice, comments, suggestions would be most helpful.

Thank you.

  • Your .container-hdr-home-mobile is just set to display: none; in CSS and not visible altogether. Not sure which behavior do you expect here. – Rarst Jun 3 '14 at 17:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.