Skip to content

Instantly share code, notes, and snippets.

@navap
Created December 24, 2013 02:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save navap/8108017 to your computer and use it in GitHub Desktop.
Save navap/8108017 to your computer and use it in GitHub Desktop.
Navbar template/css for http://roots.io. - adds a search box on the right side of the navbar - adds branding to the collapsed nav menu
/* ==========================================================================
Header
========================================================================== */
.banner {
/* Menu items */
.navbar {
.navbar-header {
.navbar-toggle .icon-bar {
background-color: @brand-primary;
}
.navbar-brand {
margin-left: 15px;
padding: 0 0 0 0;
img {
height: 35px;
margin: -9px 10px 0 0;
}
h1 {
font-family: "Kreon";
font-weight: bold;
font-size: 24px;
color: @brand-primary;
display: inline-block;
margin: 12px 0 0 0;
}
}
}
}
}
<header class="container banner" role="banner">
<div class="row navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/">
<img src="/assets/logo.png">
<h1><?php bloginfo('name'); ?></h1>
</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
endif;
?>
<form role="search" method="get" class="navbar-form navbar-right" action="<?php echo home_url('/'); ?>">
<div class="form-group">
<label class="hide"><?php _e('Search for:', 'roots'); ?></label>
<input type="search" value="<?php if (is_search()) { echo get_search_query(); } ?>" name="s" class="form-control" placeholder="<?php _e('Search', 'roots'); ?> <?php bloginfo('name'); ?>">
</div>
<button type="submit" class="hide btn btn-default"><?php _e('Search', 'roots'); ?></button>
</form>
</nav>
</div>
</header>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment