sticky navbar with javascript - javascript

I am trying to make my navbar sticky, but I don't know how to integrate javascript. could you help me
my code is like this
<header>
<div class="menuhd">
<div class="main_menu home_menu" >
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg navbar-light ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-menu-item" id="navbarNav">
<ul class="navbar-nav">
<li><i class="fas fa-house-user"></i> HOME</li>
<li><i class="fas fa-tshirt"></i>OUTFITS</li>
<li><i class="fas fa-sign-out-alt"></i> LOGOUT</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>

Related

jQuery Breaking Navbar Dropdown

I have noticed that when I click the navbar toggle to dropdown nav-links, it works fine, but when I click again to bring them back up, it doesn't work. I have noticed that this is due to jQuery being used in my code. I am unsure how to go about solving this, any help is greatly appreciated.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container">
<div class="row mt-1">
<img src="https://via.placeholder.com/50" alt="Bastion Logo">
<div class="d-flex col-6 align-items-center">
<h6 class="menuItem text-dark hover-underline-animation-navitem pb-1">support#bastiontech.co.uk</h6>
</div>
</div>
<button type="button" class="navbar-toggler text-bg-dark" data-bs-target="#navbarNav" data-bs-toggle="collapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<div>
<ul class="navbar-nav">
<li class="nav-item hover-underline-animation-navitem">
Website Design
</li>
<li class="nav-item hover-underline-animation-navitem">
SEO
</li>
<li class="nav-item hover-underline-animation-navitem">
Power Apps
</li>
<li class="nav-item hover-underline-animation-navitem">
Contact Us
</li>
<li class="nav-item btn Audit btn-md text-white">
Free Audit
</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

header is overlapped by sticky navbar

<section class="bg-secondary-dark py-2">
<div class="container">
<div class="row justify-content-between">
<div class="col-md-6">
<i class="fas fa-envelope"></i>
</div>
<div class="col-md-6 text-right">
<i class="fab fa-facebook mr-3 text-muted"></i>
</div>
</div>
</div>
</section>
<nav class="navbar navbar-expand-lg navbar-light py-0 bg-white justify-content-between **fixed-top**">
<div class="container">
<a class="navbar-brand"><img src="assets/img/logo.png" class="img-fluid"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
this is sticky bootstrap navbar. i downloaded bootstrap and js using npm and didn't used custom css

navbar not working when updating bootstrap 4.0.0 alpha to newer version

I have a little project to try to learn some Angular and after a few months when I did not have time to work on it I got it back now.
First I wanted to update my version of bootstrap but I am getting some problems with the navigation bar.
My navbar:
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngFor="let menuItem of menuItems" routerLinkActive="active">
<a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<i class="fa fa-linkedin-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-xing-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-stack-overflow socialIcons" aria-hidden="true"></i>
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
And here my current working libraries:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
I am trying to update to the official ones provided here:
https://getbootstrap.com/docs/4.1/getting-started/download/
When I update the libraries my navbar does not work at all, it only shows a link on the right top corner with the title "navbar".
Any ideas?
Thanks!
simply change navbar-toggleable-md to navbar-expand-md and for add colors, change navbar-inverse bg-inverse to navbar-dark bg-dark.
your burger-menu is left side you can change into right side by add anchor tag before button
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Working Snippet
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngFor="let menuItem of menuItems" routerLinkActive="active">
<a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<i class="fa fa-linkedin-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-xing-square socialIcons" aria-hidden="true"></i>
<i class="fa fa-stack-overflow socialIcons" aria-hidden="true"></i>
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
Yeah, I'm pretty sure that You should realy read this first.
Bootstrap 4, bg-inverse not showing?

How to close(hide) menu on mobile when menu item is clicked

I have a problem with my website when it is seen on mobile phone. I have one button that opens "table" with menu items. When I click on some menu item, correct page opens, but "table" with menu items is not closed. It closes only when I click on menu button again.
I tried all the solutions for similar situations that are offered here, but non of them worked for me.
Does anyone have a clue how can I fix this?
Thanks in advance!
Here is my code:
in head tag:
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/templatemo_custom.js"></script>
<script src="js/jquery.lightbox.js"></script>
<script src="js/bootstrap-collapse.js"></script>
in body tag:
<nav class="navbar navbar-default" 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 collapsed" 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 id="top-menu">
<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="show-1 templatemo_home" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li>
<li><a class="show-1 templatemo_page3" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li>
<li><a class="show-1 templatemo_page5" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li>
<li><a class="show-1 templatemo_page2" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li>
<li><a class="show-1 templatemo_page4" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
You have to use javascript for that. Try below code.
<script>
function closeFunction()
{
document.getElementById('bs-example-navbar-collapse-1').style.display='none';
}
</script>
<nav class="navbar navbar-default" 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 collapsed" 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 id="top-menu">
<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="show-1 templatemo_home" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li>
<li><a class="show-1 templatemo_page3" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li>
<li><a class="show-1 templatemo_page5"onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li>
<li><a class="show-1 templatemo_page2" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li>
<li><a class="show-1 templatemo_page4" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I've found a solution to my problem :)
In addition to Omkar solution, there should be one more function - for button it self:
<script>
function closeFunction()
{
document.getElementById('bs-example-navbar-collapse-1').style.display = "none";
}
function openFunction(){
document.getElementById('bs-example-navbar-collapse-1').style.display = "initial";
}
</script>
<nav class="navbar navbar-default" 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 collapsed" onclick="openFunction()" 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 id="top-menu">
<div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="show-1 templatemo_home" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-home"></span>Početna</a></li>
<li><a class="show-1 templatemo_page3" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-users"></span>Čime se bavimo</a></li>
<li><a class="show-1 templatemo_page5" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-medkit"></span>Terapija</a></li>
<li><a class="show-1 templatemo_page2" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-picture-o"></span>Galerija</a></li>
<li><a class="show-1 templatemo_page4" onclick="closeFunction()" data-toggle="collapse" data-target=".in" href="#"><span class="fa fa-envelope"></span>Kontakt i lokacija</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

twitter-bootstrap nav not toggling collapse

Here is my markup for my nav using bootstrap....
I'm not sure why the div with class of 'mynavbar' is not toggling open and close (by adding the 'in' class to it) when the button with a data-target='.mynavbar' is clicked (this is only on smaller screens where the hamburger type menu shows instead of the links "work, about, contact)
ALso, on large and small screens, should the li's that are clicked on have the class of "active" added to them? I'm not seeing this happen either
<nav class='navbar navbar-fixed-top drop-shadow'>
<div class='container-fluid'>
<div class='navbar-header page-scroll'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.mynavbar'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand page-scroll' href='#'><i class='glyphicon glyphicon-home'></i></a>
</div>
<div class='collapse navbar-collapse mynavbar'>
<ul class='nav navbar-nav'>
<li><a class='page-scroll' href='#work'>Work</a></li>
<li><a class='page-scroll' href='#about'>About</a></li>
<li><a class='page-scroll' href='#contact'>Contact</a></li>
</ul>
</div>
</div>
</nav>
You need to target to ID in <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">, instead of class. Then change the element that has collapse navbar-collapse class to <div class="collapse navbar-collapse" id="mynavbar">
Overall, this code should work for you
<nav class="navbar navbar-fixed-top navbar-inverse drop-shadow" role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#">
<i class="glyphicon glyphicon-home"></i>
</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a class="page-scroll" href="#work">Work</a></li>
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
And, you can add class="active" to your <li> when clicked, this is often handled in the server-side or in your own URL router

Categories