Twitter Bootstrap and mobile navbar
You need to wrap your menu inside a <div class="nav-collapse">..</div>
div to collapse your menu upon screen resize/mobile view. Try this:
HTML
<header class="span8" id="top-header"><nav class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <?php wp_nav_menu(array( 'menu' => 'Top menu', 'menu_class' => 'nav' )); ?> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a> <ul class="dropdown-menu"> <?php $args = array( 'exclude' =>'1', 'orderby' =>'name', 'order' => 'ASC' ); foreach(get_categories($args) as $category): ?> <li><a href="<?php echo get_category_link($category->term_id); ?>" title="Category: <?php echo $category->name; ?>"><?php echo $category->name; ?></a></li> <?php endforeach; ?> </ul> </li> </ul> </div> </div> </div></nav><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('title'); ?> - Back to the homepage"> <hgroup class="row-fluid"> <?php if(is_single()):?> <h2 class="like-h1">My blog</h2> <?php else: ?> <h1>My blog</h1> <?php endif; ?> <h2>Bla bla bla</h2> </hgroup></a></header>
Also, i suggest you break out your fixed-nav from your page header
and isolate it after the body
tag, this way when you resize the screen the media queries or styles that surround your header
will not affect the top nav bar, which should not be fixed on mobile view.