so my hamburger button not closes after opening inside the page
here is my navigation code
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler navbar-toggle" type="button" data-toggle="collapse"
data- target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/"rel=""title="brand logo">//some image</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav">
<li class="nav-item active p-2">
<a class="nav-link" href="/" rel="" title="Home">home</a>
</li>
</ul>
</div>
</nav>
i have nearly the same code in some other pages and it seems to be working just fine
I think you can use javascript to close this div for sudden time or when occurred any action.
$("#employeeRegister").hide();
$("#employeeRegister").show();
<button type="submit" class="btn btn-success btn-rounded waves-effect waves-light employeeRegister" id="employeeRegister">Save Changes</button>
Related
i have dropdown menu from bootstrap 4.In adaptive small screen, I have hamburger, there has title dropdown its opens another one dropdown.So, when I open title dropdown to see what inside, dropdown automatically close full dropdown. Here`s code
<nav class="navbar navbar-expand-lg navbar-header">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="./" rel="tooltip" title="Казахстанский инженерно-технологический университет" data-placement="bottom">
<img src="assets/img/logo_new.png" width="180">
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse" style="background-color: white;" id="navigation">
<ul class="navbar-nav mr-auto" id="testing">
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle myclass" data-toggle="dropdown" href="#" id="dropdownMenuButton" role="button" aria-haspopup="true" aria-expanded="false"><?=$m_admission[$_SESSION['lang']]?></a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="?page=undergraduate"> <?=$b_undergraduate[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="?page=graduate"> <?=$b_graduate[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://kazetu.edu.kz/sites/dl/" target="_blank"> <?=$b_distance_learning[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://college.kazetu.edu.kz/"> <?=$b_college[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://zerde.kazetu.kz/?lang=ru" target="_blank"> <?=$zerde_kazetu_reg[$_SESSION['lang']]?> </a>
</ul>
</div>
</ul>
</div>
</div>
</nav>
</header>
I dont fount answer for my question, so, i just write it without bootstrap on clear html and css xD
I need two buttons along with the toggle button when the navbar is collapsed. As I down want these buttons to be collapsed with menu items. So I have put the buttons inside the button group with toggle button. now the toggle button is not working anymore.
Here is the code. Please let me know what mistake I'm making. Thank you in advance.
<nav class="navbar navbar-expand-md navbar-dark sticky-top" style="background-color: #0a0a0a; margin-bottom: 0 !important; min-height: 60px;">
<div class="container">
<div class="nav navbar-header">
<img src="images/logo.png" class="logo" alt=""/>
</div>
<div class="collapse navbar-collapse flex-column " id="navbar">
<ul class="navbar-nav w-100 justify-content-center px-3">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Courses
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USP
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="Basic example" style="color: white;">
<button type="button" class="btn .btn-primary-outline border-right" style="color: white;">Sigh In</button>
<button type="button" class="btn btn-danger"><i style="color: white;" class="fa fa-search" aria-hidden="true"></i></button>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
here with navbar id
<button class="navbar-toggler" data-toggle="collapse" data-target="#**navbarNav**">
Must be the same here
<div class="collapse navbar-collapse flex-column " id="**navbar**">
also don't forget to call these js on your page
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
The "data-target" on your navbar-toggler button is set to "navbarNav" this needs to be set to the ID of your navigation which is just "navbar".
<div class="collapse navbar-collapse flex-column" id="navbar"> <!-- NOTE: id="navbar" -->
<!-- Navigation List -->
</div>
<div class="btn-group">
<!-- buttons -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<!-- NOTE: data-target = "#navbar" (these should be identical) -->
<span class="navbar-toggler-icon"></span>
</button>
</div>
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?
I am trying to float only select nav-items to the right with .justify-content-end
This works fine if I add it to the top level div class but if I create a special div with isolating one nav-items and use that class it does not work:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Bewander</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Create", "Reviews")'>Write a Review </a>
</li>
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Index", "Reviews")'>Search the World</a>
</li>
<div class="justify-content-end">
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Login", "Account")'>Login</a>
</li>
</div>
</ul>
</div>
</nav>
While .justify-content-end works this way, it moves all the items which I do not want, hence me trying to Isolate the specific nav-item:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Bewander</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Create", "Reviews")'>Write a Review </a>
</li>
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Index", "Reviews")'>Search the World</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#Url.Action("Login", "Account")'>Login</a>
</li>
</ul>
</div>
</nav>
Here is a codepen to test on
.justify-content-end pushes the .navbar-nav to the end since it's the only child.
Instead, you can try forcing the .navbar-nav to grow to full-width by applying flex-grow: 1 to it. Then, apply margin-left: auto; to the item you want to push to the right. Luckily, bootstrap has a utility class for the latter – .ml-auto.
Updated Codepen
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