Can I make a menu using .row and .col from Bootstrap? - html

Question

I was trying to make a menu using cols from bootstrap. Something similar to this:
http://i.stack.imgur.com/55xst.png
But I think it's not the best way to make it because I found so much troubles when I tried to implement into Wordpress..
Have some idea how can make it in the right way?
This is my code
HTML:
<div class="container main-menu">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-menu logo">
<div class="item-menu">
<figure>
<img src="http://www.sdi-inc-usa.com/image/35012580_scaled_116x87.jpeg" alt="">
</figure>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
<div class="item-menu">
<div class="txt-main-menu">
lorem ipsum
</div>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
<div class="item-menu">
<div class="txt-main-menu">
lorem ipsum & lorem ipsum
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
<div class="item-menu">
<div class="txt-main-menu">
lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
</div>
</div>
</div>
CSS:
.main-menu {
margin-top: 40px;
}
.main-menu > .row > .logo {
text-align: left!important;
}
.main-menu > .row > .col-menu > .item-menu {
background: #f2f2f2;
padding: 10px;
height: 107px;
font-size: 1.375em;
position: relative;
}
.main-menu > .row > .col-menu > .item-menu:hover {
background: #bcd22c;
}
.txt-main-menu > a {
font-family: 'museo-700';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
color: #565656;
}
.col-menu {
padding-left: 0px;
padding-right: 5px;
padding-bottom: 5px;
}
/** END Main Menu - LOGO*/
#media screen and (max-width: 767px) {
div.col-menu:nth-child(2n+3),
div.col-news:nth-child(2n+3),
div.col-menu:nth-child(2),
div.col-news:nth-child(2) {
padding: 0;
}
.col-grid {
padding-right: 0;
}
}
Thank you

Answer 1

I'd suggest you use the "navbar" component. It is purpose build for this type of thing.
http://getbootstrap.com/components/#navbar

Answer 2

I found this bootsrap to wordpress series online http://bootstrapwp.com/adding-bootstrap-menu-wordpress-theme/ It is a excellent course for combining bswp.
The first step is to add a custom Walker menu to create the Bootstrap menu for the WordPress theme. We will then go over how to add the custom menu to the header of our WordPress theme and some minor customization options. You will also learn how make sure the menu has all the markup needed to be responsive and support child menu items.
Create a new file called bootstrap-walker.php in the /inc/ directory
In this file add the following code:
<?php
// Custom Walker Class for Bootstrap Menu
add_action( 'after_setup_theme', 'bootstrap_setup' );
if ( ! function_exists( 'bootstrap_setup' ) ):
function bootstrap_setup(){
class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$li_attributes = '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ($args->has_children) ? 'dropdown' : '';
$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$attributes .= ($args->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ($args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
if ( !$element )
return;
$id_field = $this->db_fields['id'];
//display this element
if ( is_array( $args[0] ) )
$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
else if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'start_el'), $cb_args);
$id = $element->$id_field;
// descend only when the depth is right and there are childrens for this element
if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
foreach( $children_elements[ $id ] as $child ){
if ( !isset($newlevel) ) {
$newlevel = true;
//start the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
}
$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
}
unset( $children_elements[ $id ] );
}
if ( isset($newlevel) && $newlevel ){
//end the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
}
//end this element
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'end_el'), $cb_args);
}
}
}
endif;
Save the boostrap-walker.php file
Open functions.php
At the bottom of this file, you will want to write the code to include our new bootstrap-walker.php file. It should look like the following:
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package bootstrapwp
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<nav role="navigation">
<div class="navbar navbar-static-top navbar-default">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<?php
$args = array(
'theme_location' => 'primary',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right',
'walker' => new Bootstrap_Walker_Nav_Menu()
);
if (has_nav_menu('primary')) {
wp_nav_menu($args);
}
?>
</div>
</div>
</div>
</nav>
</header><!-- #masthead -->
Note: I also removed the “skip to content” link from this code. I go over this in the next video tutorial.
Save the header.php file
Now that we have all the code in place, we can create a new Menu from the WordPress Dashboard. Login to the backend of your WordPress site (wp-admin) and go to Appearance -> Menu
Create a new menu, select and add a few pages to the menu, and assign it to the Primary Menu theme location.
Reload the front-end of your WordPress and play with your awesome Bootstrap menu!
If you want to learn more about the Walker Class you can read more about it http://codex.wordpress.org/Class_Reference/Walker