- This topic has 2 replies, 2 voices, and was last updated 8 years, 10 months ago by
.
-
Posts
-
Hey I followed this tutorial on how to show bootstrap navbar in genesis but not sure if it is an up to date code as its was done in April 22, 2015.
How to integrate Twitter Bootstrap navbar into WordPress Genesis Framework
However im trying to get the logo in the top left like how you would with bootstrap navbars, how do you go about doing that?
https://www.hb-ts.uk/What theme are you using? All I see is a blank page with two nav items, could you at least drop the logo into the header somewhere. That way I can troubleshoot in developer tools. Otherwise, this question is a large time investment for the answerer. Hence you haven't received a response until now.
-Robert McMillin
RobertMcMillin.comIm using the sample theme and this is just a test site which i have, hence why i am only using two nav items. All i want is to be able to display the logo in the top left like how you would see on a bootstrap nav so that i can use it in future projects.
I have inserted the following code below in to my functions.php which has helped display the actual menu but for some reason cant display the standard Genesis theme logo or dynamic text.
/** Integrating Bootstrap NAVs
*
* Tab and Pill navs require role='presentation' as an attribute to the- of a menu item
* Currently, there is no filter to add an attribute to the- (only added id or class)
* One way to do this would be to override the start_el function but seems like a lot of code to
* copy to only add an attribute. Created a simple jQuery solution in script.js.
*
* fixed-top and fixed-bottom require padding-top and padding-bottom, respectively. This is also
* added via jQuery in script.js since we can get the computed height of the nav and add the appropriate
* padding.
*/
//Menu variables:
//An admin interface could be created to change these values on the dashboard
$bfg_genesis_menu = false;
$bfg_menu_type = 'navbar'; //Possible values: tab, pill, navbar
$bfg_navbar_type = 'static-top'; //Possible values: static-top, fixed-top, fixed-bottom
$bfg_navbar_align = 'right';//
if (!$bfg_genesis_menu) {
//Take over nav
remove_action( 'genesis_after_header', 'genesis_do_nav' );
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
//TODO test adding subnav//Needed for all Bootstrap menus
add_filter('nav_menu_link_attributes', 'bfg_link_attributes',10,2);
add_filter('nav_menu_css_class', 'bfg_add_dropdown_active',10);
if ( $bfg_navbar_type === 'fixed-bottom' ) {
add_filter( 'body_class', 'bfg_fixed_bottom_body_class' );
}
if ( $bfg_navbar_type === 'fixed-top' ) {
add_filter( 'body_class', 'bfg_fixed_top_body_class' );
}//TODO add a admin user interface for these options.
//************Uncomment a single section to alter location of Primary Nav - Primary 1 thru 5//Primary 1***********Uncomment the following for Bootstrap primary nav replacing header*****************
//Genesis | Theme Settings | Header settings determines if nav_brand is shown or site_title is shown
// "Image Logo" will show nav_brand and site_title will be there but hidden
/* remove_action( 'genesis_header', 'genesis_do_header' ); //remove genesis header
add_action( 'genesis_header', 'bfg_custom_primary_do_nav', 5 );
add_filter('genesis_structural_wrap-header', 'bfg_no_wrap'); //remove structural wrap
add_filter('bfg_navbar_brand_content', 'bfg_navbar_brand_header'); //add brand*///Primary 2*********Uncomment the following for Bootstrap primary nav after Genesis Header****************
add_action( 'genesis_after_header', 'bfg_custom_primary_do_nav', 5 );//Primary 3*********Uncomment the following for Bootstrap primary nav before footer**********************
/* add_action( 'genesis_before_footer', 'bfg_custom_primary_do_nav'); *///Primary 4*********Uncomment the following for Bootstrap primary nav as footer**********************
/* remove_action('genesis_footer','genesis_do_footer');
add_action( 'genesis_footer', 'bfg_custom_primary_do_nav');
add_filter('genesis_structural_wrap-footer', 'bfg_no_wrap'); //remove structural wrap
add_filter('bfg_navbar_brand_content', 'bfg_navbar_brand'); //add brand*///Primary 5*********Uncomment the following for Bootstrap primary nav after Genesis Footer****************
/* add_action( 'genesis_after_footer', 'bfg_custom_primary_do_nav' );*/// Uncomment out if you want a search bar in the navbar
// add_filter('bfg_navbar_content', 'bfg_navbar_search_form');
}function bfg_fixed_bottom_body_class( $classes) {
$classes[] = 'fixed-bottom';
return $classes;
}
function bfg_fixed_top_body_class( $classes) {
$classes[] = 'fixed-top';
return $classes;
}/** Create primary nav using bootstrap. */
function bfg_custom_primary_do_nav() {
global $bfg_menu_type, $bfg_navbar_type, $bfg_navbar_align;//If menu has not been assigned to Primary Navigation, abort.
if ( ! has_nav_menu( 'primary' ) ) {
return;
}
//Default values
$container_class = '';
$menu_class = 'nav nav-pills';
$items_wrap = ' <div class="container-fluid"><ul id="%1$s" class="%2$s">%3$s</div>';
switch ( $bfg_menu_type ) {
case 'pill':
$menu_class = 'nav nav-pills';
$items_wrap = ' <div class="container-fluid"><ul id="%1$s" class="%2$s">%3$s</div>';
break;
case 'tab':
$menu_class = 'nav nav-tabs';
$items_wrap = ' <div class="container-fluid"><ul id="%1$s" class="%2$s">%3$s</div>';
break;
case 'navbar':
$container_class = 'navbar navbar-default navbar-' . sanitize_text_field( $bfg_navbar_type );
$menu_class = 'nav navbar-nav navbar-' . sanitize_text_field( $bfg_navbar_align );
$navbar_content = '';
$items_wrap = '<div class="container-fluid"><div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> ';
$items_wrap .= apply_filters( 'bfg_navbar_brand_content', $navbar_content ) . '</div> <div class="collapse navbar-collapse" id="navbar-collapse-1">';
$items_wrap .= apply_filters( 'bfg_navbar_content', $navbar_content ) . '<ul id="%1$s" class="%2$s">%3$s</div></div>';
break;
}wp_nav_menu( array(
'container' => 'nav',
'container_class' => $container_class,
'menu_class' => $menu_class,
'items_wrap' => $items_wrap,
'walker' => new bfg_Walker_Nav_Menu(),
'theme_location' => 'primary'
) );}
/** Extends the Walker_Nav_menu and overrides the start_lvl function to add class to sub-menu */
class bfg_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"sub-menu dropdown-menu\">\n";
}
}/** adds attributes to anchor, , of a dropdown menu */
function bfg_link_attributes($atts,$item) {
if(in_array('menu-item-has-children',$item->classes)) {
$atts["class"] = "dropdown-toggle";
$atts["data-toggle"] = "dropdown";
}
return $atts;
}
/** adds the necessary classes bootstrap expects for menu items,- , with children and current-menu-* items */
function bfg_add_dropdown_active($classes) {
if(in_array('menu-item-has-children',$classes) ){
$classes[] = 'dropdown';
}
if(in_array('current-menu-item',$classes) ){
$classes[] = 'active';
}
if(in_array('current-menu-parent',$classes) ){
$classes[] = 'active';
}
return $classes;
}
//TODO search submit button is slightly off of navbar-brand
//TODO need media query to change line-height when responsive menu is active
function bfg_navbar_search_form($navbar_content) {
$url = get_home_url();$navbar_content .= '<form method="get" class="navbar-form navbar-left" action="' . $url . '" role="search">';
$navbar_content .= '<div class="form-group">';
$navbar_content .= '<input class="form-control" name="s" placeholder="Search" type="text">';
$navbar_content .= '</div>';
$navbar_content .= '<button class="btn btn-default" value="Search" type="submit">Submit</button>';
$navbar_content .= '</form>';return $navbar_content;
}function bfg_navbar_brand($navbar_content) {
//TODO admin interface to add image, brand, url to options
$image = get_stylesheet_directory_uri() . 'images/logo.png';
list($width, $height, $type, $attr) = getimagesize($image);$url = get_home_url();
$brand = get_bloginfo('name');
$navbar_content .= '';
$navbar_content .= '';
if ($height > 50) {
$navbar_content .= '<style> .navbar-nav li a, .navbar-form { line-height: ' . $height . 'px;}';
$navbar_content .= '.navbar-brand {height: inherit;}</style>';
}return $navbar_content;
}
function bfg_navbar_brand_header($navbar_content) {
//TODO admin interface to add image, brand, url to optionsob_start();
do_action('genesis_site_title');
$site_title = ob_get_contents();
ob_end_clean();
ob_start();
do_action('genesis_site_description');
$site_description = ob_get_contents();
ob_end_clean();$image = get_stylesheet_directory_uri() . 'images/logo.png';
list($width, $height, $type, $attr) = getimagesize($image);$url = get_home_url();
$brand = get_bloginfo('name');
$navbar_content .= '<div class="title-area">';$navbar_content .= '
$navbar_content .= $site_title . $site_description . "</div>";
if ($height > 50) {
$navbar_content .= '<style> .header-image .navbar-nav li a, .header-image .navbar-form { line-height: ' . $height . 'px;}';
$navbar_content .= '.navbar-brand {display: none;} .header-image .navbar-brand {display: block; height: inherit;}';
$navbar_content .= '.</style>';
}return $navbar_content;
}function bfg_no_wrap($arg) {
return '';
} - of a menu item
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.