Bootstrap Navbar Active Links - javascript

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.

Related

VueJS close Hamburger Menu on Route Change

I have a simple VueJS App with a Navigation Bar from Bootstrap:
<template>
<header id="header">
<nav class="navbar mynavbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
<a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><router-link to="/home"><a>Home</a></router-link></li>
<li><router-link to="/about"><a>About Us</a></router-link></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
</template>
Now I want to ensure that when I change the route, the Bootstrap Menu gets closed. What is the best way to accomplish this?
Instead of adding event handlers to every router-link, you can simply watch the $route property for changes:
<script>
export default {
watch: {
'$route' () {
$('#navbar-collapse').collapse('hide');
}
}
}
</script>
Without Bootstrap and jQuery, can be easily achieved using class toggle and watch route changes.
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
#click="toggledNav = !toggledNav"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
Script:
export default {
data () {
return {
toggledNav: false
}
},
watch: {
'$route' () {
this.toggledNav = false
}
}
}
You could give this a try:
<template>
<header id="header">
<nav class="navbar mynavbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
<a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><router-link #click.native="closeMenu()" to="/home"><a>Home</a></router-link></li>
<li><router-link #click.native="closeMenu()" to="/about"><a>About Us</a></router-link></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
</template>
<script>
export default {
methods: {
closeMenu() {
$('#navbar-collapse').collapse('hide');
}
}
}
</script>
With vue3 and bootstrap5, adding this to the router-link element:
data-bs-toggle="collapse" data-bs-target=".navbar-collapse"
did not work for me: the menu would close without the link being followed.
So, I added this to router/index.js:
router.beforeEach(() => {
document.getElementById('navbarCollapse').classList.remove('show');
})
with navbarCollapse being the id of the div holding the menu/nav items.
It seemed to do the trick.
If necessary you can adjust the hamburger button state: its class list would need to contain "collapsed" and aria-expanded set to "false".
This gets corrected though when the user clicks the button again, so I didn't opt to write that code.
If you are using bootstrap-vue and vue-router.
<script>
export default {
watch: {
'$route' () {
const element = document.querySelector("#nav-collapse");
let isShown = element.classList.contains("show");
if(isShown){
this.$root.$emit('bv::toggle::collapse', 'nav-collapse')
}
}
}
}
</script>
<template>
<b-navbar toggleable="lg" type="" class="p-0">
<b-navbar-toggle target="nav-collapse" id="navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<div class="nav-wrapper w-100">
<ul class="app-navigation__list">
<router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
<a href="">
<span class="link-text">Home</span>
</a>
</router-link>
<router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
<a href="">
<span class="link-text">About</span>
</a>
</router-link>
<router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
<a href="">
<span class="link-text">Store</span>
</a>
</router-link>
</ul>
</div>
</b-collapse>
</b-navbar>
</template>
I know this is an old question but my answer might help someone.
do this in your router/index.js
const router = createRouter({}); //P.S I am using Vue3
then add this before each route entering like so.
router.beforeEach(() => {
$('.navbar-collapse').collapse('hide'); //Be sure to import jquery
});
Because this is such a simple task, I try to make it as simple as my simple website.
Vue.mixin((()=> {
let store = Vue.observable({
indexMenu: false,
})
return{
computed: {
menu: {
get() {
return store.indexMenu
},
set(val) {
store.indexMenu = val
}
}
},
watch: {
'$route' () {
this.menu = false
}
}
}})())
router.beforeEach((from,to,next) => {
$('.navbar-collapse').collapse('hide'); //Be sure to import jquery
next();
});
This works

Prevent Bootstrap collapse navbar from closing on mobile when scrolling

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");

How to show different items in navbar and when clicked on collapsed button

I'm using angularJS along with bootstrap 3.2. I use navbar with some items.
The default behavior with bootstrap is when collapsed occurs then the same those items from navbar can be shown in dropdown panel if click on the newly appeared button.
How can I show different items in dropdown panel when in collapsed mode.
I would like to use as much built-in functionality as possible in both angularJS and bootstrap, and minimize hacks and workaround.
<nav class="navbar navbar-default navbar-fixed-top" ng-controller="HeaderCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button id="collapse-button" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo left navbar-brand">
<a href="#!/main">
<img src="logo.png" />
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" ng-cloak>
<div class="navbar-avatar clearfix flLeft">
<img src="avatar.png" title="" />
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
For example I want this "avatar.png" to be show differently (for examle in circle or in rectangle) if it is on the navbar or shown by clicking on the collapsed button.
You use the css media query:
.buttons-i-only-show-when-collapsed {
display: none;
}
#media (max-width: 767px) {
.buttons-i-only-show-when-collapsed {
display: block;
}
}
.hide-only-if-collapsed {
display: block;
}
.show-only-if-collapsed {
display: none;
}
#media (max-width: 767px) {
.show-only-if-collapsed {
display: block;
}
.hide-only-if-collapsed {
display: none;
}
}
With minor modifications accepted answer works
just add .hidden-xs at the div you want to hide
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row hidden-xs">
and visible-xs the div you want to show
<div class="row visible-xs">

Image not resizing Bootstrap 3

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%;
}

PNG Image not displaying

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.

Categories