I have an online store developed in Wordpress/WooCommerce and I need to add some flags, in top navigation.
In header.php I saw that that section is called by woo_top() function, but I don't find it.
Please help me to find this function or how to add some code in top navigation.
// Hook In
add_action( 'woo_top', 'woo_bootstrapped_nav' );
// Our hooked in Function
function woo_bootstrapped_nav() { ?>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<?php bloginfo( 'name' ); ?>
<?php
$args = array(
'theme_location' => 'top-bar',
'depth' => 2,
'container' => 'div',
'container_class' => 'nav-collapse collapse pull-left',
'menu_class' => 'nav',
'walker' => new Bootstrap_Walker_Nav_Menu()
);
wp_nav_menu($args);
?>
<ul class="nav secondary-nav pull-right">
<li class="dropdown"> <?php echo do_shortcode('[fblike style="button_count" width="90" float="left"][google_plusone size="medium" float="left" annotation="bubble"][twitter_follow username="twitter_name" show_screen_name="false" count="false" float="left"]'); ?></li>
</ul>
</div>
</div>
</div>
<?php } // End woo_bootstrapped_nav()
here in above code add flag images below home url link.
Related
Having trouble getting the navwalker to expand on mobile.
I have added the code to functions php
// Register Custom Bootstrap Navigation Walker
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';
Here is my navwalker code, if anyone can help me resolve this conundrum I would be most greatful. Please excuse the formatting on here.
<nav class="main-menu navbar navbar-bg thetop" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="<?php echo home_url(); ?>">
<?php if (function_exists('the_custom_logo')) {
the_custom_logo();
}
else{
bloginfo('name');
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker())
);
?>
</ul>
<!-- Search Form -->
<form id="searchform" class="navbar-form navbar-right" role="form" action="<?php echo home_url( '/' ); ?>">
<div class="input-group">
<input type="text" class="form-control" name="s" placeholder="Ara"><span class="input-group-btn"><button type="submit" class="btn btn-default btn-primary -red"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div>
</nav>
Nevermind I figured this out. I am building a new theme using wpBootstrapStarter. Recently updated the theme which also updated bootstrap release using jquery 3.3.2. I just downgraded and all is well.
I guess the devs didn't fully test before release. Good job i spotted via console.
I'm creating a WordPress theme from scratch using Bootstrap. I'm making the menu now, and so far it's going smooth. I have created a right aligned div for a top widget to show for example language flags. I have removed the collapse classes so the widget always is shown in the menu. The problem is that if you're on a smaller screen, I want to put the widget inside the menu, so the user have to click the menu button to see the menu and widget. Any suggestions?
Here's my code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">TEST
<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" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-left">
<?php wp_nav_menu( array(
'menu_class' => 'nav navbar-nav',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
) ); ?>
</div>
<div id="navbar" class="navbar-right">
<div class="top-right">
<div class="top-widget"> <?php dynamic_sidebar( 'right-top' ); ?> </div>
</div>
</div>
</div>
</nav>
I suggest you use javascript to clone the widget and append it to your menu, then use CSS to show/hide it for the appropriate screen sizes.
Beware of the duplicate id <nav id="navbar". Better make the right one <nav id="navbar-right".
Javacript:
$(document).ready(function () {
$('#navbar-right .top-widget')
.clone()
.appendTo( $('#navbar') )
.attr('id', 'widget-within-navbar');
}):
CSS:
#widget-within-navbar{ display: block }
#media (min-width: 768px) {
#widget-within-navbar { display: none }
}
Disclaimer: It's been a while since I used the jQuery's clone() and appendTo() functions so I don't guarantee that my syntax is correct. But hopefully you get the gist.
I am trying to implement fullpage.js in my WordPress theme. Everything works fine, but I cant find a way to use the standard WordPress nav with the fullpage.js anchors.
this is how i get my pages:
<?php $query = new WP_Query( 'page_id=5' ); ?>
<?php if( $query->have_posts() ): ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="section" id="section0">
<div class="content">
<div class="row">
<div class="col-sm-4">
<div class="content-text">
<h1 class="headline-about"><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
That's my header including nav.
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container"><img id="logo-main" class="img-responsive" src="<?php bloginfo('template_directory'); ?>/img/birnis-logo.png"></div>
<div class="container">
<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>
</div>
<div class="collapse navbar-collapse">
<?php
wp_nav_menu( array(
'theme_location' => 'top_menu',
'depth' => 0,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!--/.nav-collapse -->
</div>
</nav>
</header>
and here I load fullpage.js
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
anchors: XXX,
menu: '.nav'
});
});
</script>
Is there a way to change the code, so that every time I add a page to my menu it automatically adds a new anchor?
For example I create a new section with a different page_id.
After that I add the page to my menu in the WordPress back end.
Now I want the new list item to scroll to the right section.
I hope you understand what I am trying to achieve.
Thanks for your time, your answer is much appreciated!
I don't see any element in your markup with the class "nav".
It seems you have to use nav instead of .nav in the menu option:
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
anchors: XXX,
menu: 'nav'
});
});
I am trying to create a theme that will allow the user to select a logo image for their main navbar in the wordpress customizer. I am building the theme using bootstrap3 and want to be able to allow the admin of the blog to select a "brand" image to place on the navbar without having to hard code it.
Code is:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle for navbar -->
<div class="navbar-header">
<button type="button" data-toggle="main-navbar" class="navbar-toggle collapsed">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="<?php echo home_url(); ?>" class="navbar-brand">
<!-- Where the image will be placed -->
</a>
</div>
I haven't tried it yet, but I assume this would work.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle for navbar -->
<div class="navbar-header">
<button type="button" data-toggle="main-navbar" class="navbar-toggle collapsed">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php if( get_theme_mod( 'themeslug_logo') ) : ?>
<div class='site-logo'>
<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> 'rel='home' class="navbar-brand">
<img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>'alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'>
</a>
</div>
<?php
/* in case no logo is set, show site title and description */
else: ?>
<div>
<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name'); ?></a></h1>
<h3 class='site-description'><?php bloginfo( 'description'); ?></h3>
</div>
<?php endif; ?>
</a>
</div>
# functions.php
function mytheme_customize_register( $wp_customize ) {
$wp_customize->add_section( 'themeslug_logo_section' , array(
'title' => __( 'Logo', 'themeslug' ),
'priority' => 30,
'description' => 'Upload a logo to replace the default site name and description in the header',
));
$wp_customize->add_setting( 'themeslug_logo' );
$wp_customize->add_control( new WP_Customize_Image_Control(
$wp_customize, 'themeslug_logo', array(
'label' => __( 'Logo', 'themeslug' ),
'section' => 'themeslug_logo_section',
'settings' => 'themeslug_logo',
)
));
}
add_action( 'customize_register', 'mytheme_customize_register' );
source: http://www.cloudways.com/blog/how-to-add-custom-widget-area-and-theme-customizer-api-on-your-wordpress-theme/
I'm probably making a wacky error, but after looking around and looking around couldn't find it.
I'm using Rachel Baker's Bootstrap WP to build a website for a photographer, but it seems like the container div is not centered. Case in point -->
This is what my html looks like, for the header for example :
<header>
<div class="container">
<div class="row">
<div class="span6">
<div id="logo">
<a href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>">
<img src="<?php echo get_template_directory_uri();?>/assets/img/logo.png" alt="####not for google" />
</a>
</div><!--logo-->
</div><!--span.logo-->
<div class="span5 offset1">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<?php wp_nav_menu(
array(
'menu' => 'main-menu',
'container_class' => 'nav-collapse collapse',
'menu_class' => 'nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new Bootstrapwp_Walker_Nav_Menu()
)
); ?>
</div><!--span-->
</div>
</div>
</header><!--header-->
What is it I'm missing? :S
Oof, thanks for the assistance guys!
There was stray css in a transition script, which was making this happen. Farrukh was right, I think the previous developer was trying to account for some sort of sidebar on the left side.