I am currently using a bootstrap collapsed navigation for when my site is viewed on a mobile. I want to hide my logo from the top of the page and put it inline with my toggle button to save some screen space. When I try to place my image into the navbar it doesn't seem to display, all that displays is my ALT text. Here is the code i'm currently using.
<div class="row">
<div class="col-md-12">
<nav id="menu1" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div id="logo" class="pull-left hidden-md hidden-lg">
<div class="img-responsive logo-small">
<img src="images/logo-xs.png" alt="small-logo"/>
</div>
<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>
<?php wp_nav_menu( array( 'theme_location' => 'main-menu',
'depth' => 2,
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'nav nav-pills nav-justified',
'walker' => new wp_bootstrap_navwalker() )); ?>
</nav>
</div>
Try to find the network request for the image using Chrome Dev Tools for instance.
Chrome Dev Tools, network tab
It seems like you're missing a closing </div> tag. I suppose it should be just before the <button>
you are missing a closing "div" tag. Because between "nav" tag section open three "div" but close two "div" tag.
Related
I am using Visual Studio 2017 with the built in MVC template, I added to bootstrap.css to create a navbar that is along the left side of the screen on sm/md/lg and across the top on xs. The navbar looks like so
<div id="sidenav" class="col-xs-12 col-sm-3 col-lg-2 navbar navbar-default navbar-fixed-left nav-stacked">
<div class="col-xs-12 container">
<!--Header-->
<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>
#Html.ActionLink("Menu", "Index", "Home", "Home", new { #class = "navbar-brand" })
</div>
<!--Content-->
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Elements</li>
</ul>
</div>
</div>
I added to bootstrap.js the following and made no other changes:
$('.navbar-nav li a').click(function (e) {
$('.navbar-nav li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
The problem seems to be with the e.preventDefault(), if I include it, the active list item will change, but navigation doesn't happen. If I remove it, the active item will clear, the clicked item will change color, navigation happens, but then the correct link will go back to normal and the original active link is active again.
Probably something small and stupid but what do I have wrong or what am I missing, thank you.
I can't seem to make the collapse work on my menu using WP Bootstrap Navwalker.
Below is my code :
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav" role="navigation">
<div class="container-fluid">
<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>
</div>
</div>
<?php
wp_nav_menu( array(
'menu' => 'primary',
'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())
);
?>
</nav>
</div>
</div>
And below is what I defined in my functions.php :
require_once('WP_Bootstrap_Navwalker.php');
function wpb_theme_setup(){
// Nav Menus
register_nav_menus(array(
'primary' => __( 'Primary Menu' )
));
}
And my bootstrap.min.js :
<script src="<?php bloginfo('template_url'); ?>/js/bootstrap.min.js"></script>
Can anybody point out where I got it wrong? Thank you so much in advance!
Best regards,
Peter
I was able to solve this issue when I changed WP_Bootstrap_Navwalker ()) and WP_Bootstrap_Navwalker.php to all lower case letters.
I have a vertical navbar that becomes collapsible when viewed in mobile devices. I want my users to continue to see the navbar even after they scroll, and only have it close by clicking on an item or on the nav toggle.
I've tried the following (from a post on stack overflow :) ) :
$('.sidebar-navbar-collapse').on({
"show.bs.collapse": function() { this.closable = false;console.log('in show nav'); },
"click": function() { this.closable = true; console.log('in click to hide nav'); },
"hide.bs.collapse": function() { return this.closable;console.log('in hide nav, closable:', this.closable); }
});
But while I see the output for the shown & click, I don't see it for the hide event when it is closed by scrolling.
HTML:
<div class="col-md-4 col-sm-4 sidebar-nav">
<div class="navbar" role="navigation">
<h1 class='hidden-xs' style="border-bottom: 1px solid #ddd;">Topics</h1>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Topics</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" style="list-style:none; font-size: 16pt !important; font-family: תArial, sans-serif;" lang="HE">
<li>
Privacy
</li>
<li>
Report
</li>
</ul>
<div class="clear"></div>
</div>
</div>
Here is a js fiddle:
https://jsfiddle.net/bv773t0a/
Thank you!
Rightly pointed out by #Karan3112
You have something conflicting with Bootstrap Javascript within your main.js. Try:
jQuery(".collapse.navbar-collapse.in").removeClass("in");
I am currently hitting a strange roadblock with Boostrap's mobile nav bar where if I place the Bootstrap JS script below the jQuery JS script (where it should be), the mobile menu will open, but will not close. However, if I flip the order of the scripts, the mobile menu works flawlessly! I read about how this might be where I may have a duplicate JS somewhere, but I cannot find a duplicate.
Script order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/api.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>
Header (where the navbar is):
<header>
<div class="heading container-fluid">
<div class="btn-group searchbar-top">
<input id="searchinput" type="search" placeholder="Search for a song" class="form-control">
<i class="glyphicon glyphicon-search search-button-desktop"></i>
</div>
<a class="heading-image" href=""><img id="my-heading" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo_header.png" alt="UNCVRD"></a>
<ul class="signup-login-buttons">
<?php if (is_user_logged_in()) { ?>
<li>
LOGOUT
</li>
<?php } else { ?>
<!-- <a class="login_button" id="show_login" href="">Login</a> -->
<li><a id="desktop-bar-signup" data-toggle="modal" data-target="#modalsignup" href="#">SIGN UP</a></li>
<li><a data-toggle="modal" data-target="#modal-login" href="#">LOG IN</a></li>
<?php } ?>
</ul>
</div>
<nav class="navbar">
<div class="btn-group searchbar-top">
<input id="searchinput" type="search" placeholder="Search for a song" class="form-control">
<span id="searchclear" class="icon ion-android-close"></span>
</div>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<i class="glyphicon glyphicon-search search-button"></i>
<a class="navbar-brand" href=""><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo_header.png" alt="UNCVRD"></a>
<a class="mobile-signup" data-toggle="modal" data-target="#modalsignup" href="#">Sign Up</a>
</div>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'container_id' => 'myNavbar'
));
?>
</div>
</nav>
</header>
you dont need to include jquery libraray link in footer. because wordpress is already included in top of the page. you can view by view page source on browser.
for this
removing the jquery file fixes the menu issue but now none of my main.js scripts work. console says "$ not a function"
you can use
(function($){
or you can use jQuery instead of $
I am currently using the Bootstrap 3 framework to create a prototype, I have a logo image in my header of my website that doesn't seem to be resizing at all. I have given it the image-responsive class but it doesn't affect it.
I think the column may not be holding the image content. I have created a fiddle (with a sample header image off google)
http://jsfiddle.net/pocockn/52VtD/10157/
<!-- navbar and logo -->
<div class="navbar navbar-default" role="navigation">
<div class = "row nav-row">
<div class="col-md-10">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src ="http://slant.investorplace.com/files/2013/08/pandora-stock-logo.png" class="img-responsive"></a>
<button type="button" class="navbar-toggle collapsed" 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> <!-- end of col md 8 -->
<div class="col-md-2">
<div class="navbar-collapse collapse">
<ul class="nav nav-stacked">
<li>ROOMS</li>
<li>PROFILE</li>
<li>CONTACT</li>
</ul>
</div> <!-- end of col md 4 -->
</div><!-- end of row -->
</div><!-- end of container -->
Thanks!
Demo Try This
I Added class "logo" to img tag and "remove_pad" to a tag
.logo{
width:100%;
height:100%;
}
.remove_pad{
padding:0px !importnat;
}
One way is to override directly your img with css :
Fiddle : http://jsfiddle.net/62uz5odq/
.navbar-brand > img {
width:auto;
height:100%;
}