I have created a landing page for an event. Everything is working fine, but when the navbar is opened in mobile view, it doesn't collapse back when clicked on an item. It stays open covering almost 3/4 of the screen while the page scrolls to the sections finely. I need the nav bar to collapse when an item is clicked.
Here's the HTML for the navbar I've created
<div id="nav-bar" >
<nav class="navbar navbar-expand-lg navbar-light" style="background:#2E935D;">
<img src="assets/images/logonew.png" style="height: 3.35rem; padding-left: 20px;"/> <!-- logo on nav bar-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" d onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#home">Home<span class="sr-only">(current)</span></a></li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#info">Info</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#schedule">Schedule</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#rules">Rules</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#register">Register</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#contact">Contact Us</a> </li>
<li class="nav-item"><a style="color: #fff;" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="https://examplelink.com" target="_blank"><i class="fab fa-facebook" style="font-size:30px;"></i></a></li>
</ul>
</div>
</nav>
</div>
Are there any mistakes or issues in the code? How can I achieve the desired behavior of the navbar?
Thank you in advance.
This worked for me
// Close Bootstrap 3 navbar when a nav item is clicked
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
setTimeout(function () {
$('.navbar-toggle:visible').click();
}, 100);
});
found here. I also had to add a delay.
Related
My dropdown is working as in desktop and in movile version and ipad plus it toggle and collapse.
The issues is when i press it it only show the button but it doenst shwo the dropdown list after it is ipad version even i added javascrip jquery and css.
This is my code:
<script type="text/javascript">
$(document).ready(function() {
$('dropdown-toggle').dropdown()
});
</script>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">APIzoid</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data- target="#navbarToggleButton" aria-controls="navbarToggleButton" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerButton">
<ul class="navbar-nav ms-auto me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Fitness</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src="./javascript/script.js"></script>
I am asking for a way to collapse this nav-bar after link click rather than javascript event listener or data-bs-toggle and data-bs-target both methods answered in that article (article link) are not working with my code.
here is my code:
<header class="header-nav" id="home">
<nav class="navbar navbar-expand-lg custom-nav fixed-top">
<div class="container-fluid">
<a id="brand" href="#"><span>C</span> Solutions</a>
<button
class="navbtn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span><i class="fas fa-bars burger-menu"></i></span>
</button>
<div
class="collapse navbar-collapse justify-content-between"
id="navbarSupportedContent"
>
<ul class="navbar-nav m-auto mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">why choose us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#our-clients">our clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<button class="btn btn-primary">request a quote</button>
</ul>
</div>
</div>
</nav>
</header>
can any one help please?
Your code works, you only forgot to add the boostrap.bundle.min.js in your index.html.
Add this in your index.html. that's all!
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
And you don't need to add extra js code. Only add this in your index.html and it should work.
i have a site i'm working on and i have the nav-items set so that when you click on a nav-link it changes the active class to the link that you clicked.
with this said how do I set a certain link to be active by default in the navbar?
Code:
$(".nav-item a").on("click", function() {
$(".nav-item a").removeClass("active");
$(this).addClass("active");
});
.nav-item a.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</div>
</nav>
I am still quite new to javascript so any help will be great (even if it doesnt work)
Edit: It appears i didnt add enough detail, i'm sorry.
I would like to have the Home nav-link stay active until the user clicks another nav-link to another part of the page (im thinking about on scroll over different parts of the site but thats a different question altogether). with this in mind i want to have the site functionality to stay the same but have the default active link changed when a different one is clicked.
Just add active class to nav-link
$(".nav-item a").on("click", function() {
$(".nav-item a").removeClass("active");
$(this).addClass("active");
});
.nav-item a.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</div>
</nav>
your code is about CLICK action and you dont want it . you should use
$('.nav-item a').addClass("active");
in out of function click body:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
</ul>
</div>
</nav>
CSS:
.nav-item a.active
{
color: red;
}
JAVASCIPT:
<script>
$('.nav-item a').addClass("active");
</script>
I have a main menu on my site using Bootstrap 4's navbar.
I also have another div (.social-navbar) with some additional menu items that I would like to MOVE from where they are and place INTO the Bootstrap menu on mobiles only. Basically when the menu collapses on mobile, I want the social-navbar items (facebook/twitter icons) and the LOGIN button to appear inside the navbar-nav menu from Bootstrap.
See Codepen Below...
https://codepen.io/anon/pen/KeXZJL
<div class="social-navbar clearfix">
<ul class="social-icons">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
</ul>
<ul class="login float-right">
<li class="join">Join Now</li>
</ul>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</nav>
https://codepen.io/anon/pen/KeXZJL
Is this possible?
You can add this javascript at the very end of the BODY tag:
<script>
var x = window.matchMedia("(max-width: 465px)")
function mobileMenu(x) {
if (x.matches) {
document.getElementById("navbarMain").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "inherit";
} else{
document.querySelector("body").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "#000";
}
}
mobileMenu(x)
x.addListener(mobileMenu)
</script>
When the screen width is 465px or narrower .social-navbar will be moved into the navbar collapsed menu and its backgroundColor changes to match the collapsed menu.
I am new here and forgive me if this question has already been asked before, but I couldn't find that kind of problem. And at the beginning, sorry for my grammar ;) .
The thing is, that I would like to get toggle menu that slides in from right side, after a click on the "hamburger" icon, but only when the width of the screen is smaller than 576 px. On larger screens, i have a fixed-top navbar, without any effects and that's fine. I am using Bootstrap 4 to build my site. Is it possible to do?
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand pl-md-4" href="index.html">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<ul class="navbar-nav pr-md-4">
<li class="nav-item px-md-3">
<a class="nav-link" href="#">link 5</a>
</li>
<li class="nav-item px-md-3">
<a class="nav-link" href="#">link 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link 7</a>
</li>
</ul>
</div>
</div>
</nav>
Best way to do it is create two different navs one for the Bigger screens and one more for smaller screens.And give different functionality based on the ID through JS
<!-- Hide the for large Screen -->
<nav id="jsIdentifer1" class="hidden-md hidden-lg">
your navigation code
</nav>
<!-- Hide the for small Screen -->
<nav id="jsIdentifer2" class="hidden-sm hidden-xs">
your navigation code
</nav>