I am building my first page using Bootstrap Studio and I am wondering how I could achieve a menu design like this, or similar: https://codemyui.com/fullscreen-overlay-navigation-menu/
When I click on menu toggle, it looks like this: https://imgur.com/6czS25f
My website link: https://kreatika.bss.design/
Thanks for any advice
<nav class="navbar navbar-light navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="/assets/img/Logo.png?h=9093bdbc164804385c272277c0ab9d7f"></a>
<button data-toggle="collapse" class="navbar-toggler custom-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="width: 30px;height: 30px;"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Úvod</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Služby</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Ukázky práce</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Náš příběh</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Akademie</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kariéra</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kontakt</a></li>
<li class="nav-item d-lg-flex d-xl-flex align-items-lg-center align-items-xl-center social-icons" role="presentation"><img class="social-icon-image" src="/assets/img/Facebook.png?h=261a62c570931f4fc3acbc1b33ae74d3"><img class="social-icon-image" src="/assets/img/Insta.png?h=be50f2dccc1bf2ad3d65a5104a48300d"></li>
</ul>
</div>
</div>
</nav>
[1]: https://i.stack.imgur.com/c5Dnp.jpg
https://i.imgur.com/Nunc77r.png
If its just a fixed fading menu with centered .navbar-nav, then the below answer might help. Though there are a lot of examples in your first link so hard to tell what you want exactly.
I've still not found away to disable the Bootstrap 4 navbar .collapsing toggle class. I can't find anything in the documentation to turn it off, which means you always have a height transition when opening/closing the mobile navbar.
But you can override the .collapsing class with CSS, though seems a little hacky for such a simple thing.
After a bit of fiddling I found I could override the collapsing class animation using .collapsing[style*="height"].
Bootstrap 4 natively adds the attribute style="height:...px;" to the .navbar-collapse div via javascript when the .navbar-toggler button is first clicked. But not on the second closing click.
See my codeply example link below using Bootstrap 4... (using SASS).
https://www.codeply.com/go/GXRF6aA5Du
.navbar {
.navbar-toggler {
z-index: 1000;
}
.navbar-collapse {
#include media-breakpoint-down(md) {
background: rgba(#000,.85);
opacity: 0;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
&.collapse {
opacity: 0;
pointer-events: none;
display: flex;
}
&.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important;
}
&.collapsing {
opacity: 0;
height: 100vh;
}
&.collapse.show {
opacity: 1;
pointer-events: auto;
}
.navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto;
}
}
}
}
#include media-breakpoint-down(md) {
.navbar-nav {
margin-left: initial !important;
}
}
This is the CSS output below if your not using SASS.
If you drop the below CSS into the DOM on your site it looks like this...
https://i.imgur.com/Nunc77r.png
.navbar .navbar-toggler{
z-index:1000
}
#media (max-width: 991.98px){
.navbar .navbar-collapse{
background:rgba(0,0,0,0.85);
opacity:0;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
transition:opacity 0.35s ease;
display:flex;
flex-direction:column;
align-content:center;
text-align:center !important
}
.navbar .navbar-collapse.collapse{
display:flex;
opacity:0;
pointer-events:none
}
.navbar .navbar-collapse.collapsing[style*="height"]{
opacity:1;
height:100vh !important
}
.navbar .navbar-collapse.collapsing{
opacity:0;
height:100vh
}
.navbar .navbar-collapse.collapse.show{
opacity:1;
pointer-events:auto
}
.navbar .navbar-collapse .navbar-nav{
margin-right:initial !important;
margin-top:auto;
margin-bottom:auto
}
}
#media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
}
And a stackoverflow demo too using the CSS (not the sass)...
MAIN {
padding-top: 30px;
padding-bottom: 30px;
margin-top: 56px;
height: 3000px
}
.navbar .navbar-toggler {
z-index: 1000
}
#media (max-width: 991.98px) {
.navbar .navbar-collapse {
background: rgba(0, 0, 0, 0.85);
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
overflow-y: scroll;
overflow-x: hidden
}
.navbar .navbar-collapse.collapse {
display: flex;
opacity: 0;
pointer-events: none
}
.navbar .navbar-collapse.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important
}
.navbar .navbar-collapse.collapsing {
opacity: 0;
height: 100vh
}
.navbar .navbar-collapse.collapse.show {
opacity: 1;
pointer-events: auto
}
.navbar .navbar-collapse .navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto
}
}
#media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<a class="btn btn-lg btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs »</a>
</div>
</main>
Related
I want the links to spread out along my navbar with bootstrap. I tried using flex utilities on the navbar and I also attempted to apply the nav class to make the navbar flex-enabled and then use the .justified-content-around bootstrap class, but for some reason that I cannot see it is not wanting to work! It appears as if there are margins or padding pushing the links together on the navbar but when inspecting it with developer tools I don't see anything of the sort.
Here is my codepen to examine: https://codepen.io/Spector1/pen/WNGxzpz
Otherwise here is my html and css below.
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<i class="fas fa-mobile-alt"></i>
<span>Q⋅C⋅R</span>
</a>
<button class="navbar-toggler" type="button" data-trigger="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="MainNav">
<div class="offcanvas-header mt-3">
<a class="navbar-brand" href="/">
<i class="fas fa-mobile-alt"></i>
<span>Q⋅C⋅R</span>
</a>
<button class="btn btn-dark btn-close float-right" aria-label="Close navigation">
<span>× Close</span>
</button>
</div>
<ul class="nav navbar-nav">
<li class="nav-item mx-auto">
<a class="nav-link focus" href="/home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link focus" href="/about">About Us</a>
</li>
<li class="nav-item mx-auto dropdown">
<a class="nav-link focus shadow-none dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Repair Pricing
</a>
<div class="dropdown-menu fade-down" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Smartphones</a>
<a class="dropdown-item" href="#">Smart Watches</a>
<a class="dropdown-item" href="#">Tablets & iPads</a>
<a class="dropdown-item" href="#">Drones</a>
<a class="dropdown-item" href="#">Laptops</a>
<a class="dropdown-item" href="#">Desktops</a>
<a class="dropdown-item" href="#">Other/Custom Quote</a>
</div>
</li>
<li class="nav-item mx-auto dropdown">
<a class="nav-link focus shadow-none dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Warranties & Policies
</a>
<div class="dropdown-menu fade-down" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Our Repair Warranties</a>
<a class="dropdown-item" href="#">Rewards Program</a>
<a class="dropdown-item" href="#">Our Repair Policies</a>
</div>
</li>
<li class="nav-item mx-auto">
<a class="nav-link focus" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<main>
<div>
<h1>Home/Index Page</h1>
</div>
</main>
<footer>Quality Cell Repair © 2020</footer>
</body>
/* Mobile Nav Overlay/OffCanvas Menu Styles */
body.offcanvas-active {
overflow: hidden;
}
.offcanvas-header {
display: none;
}
nav #MainNav button.btn-dark {
background-color: #1d1d2c;
border: none;
}
/* Nav Hamburger Menu Icon (create lines) */
.navbar-toggler {
margin: 1em;
width: 65px;
border: 2px solid #f7f4e9;
transition: border 0.2s ease-in-out;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
border: none;
/* Remove kyboard navigation outline when focused */
outline: none;
}
.navbar-toggler:after,
.navbar-toggler:before,
.navbar-toggler span.icon-bar {
background-color: #f7f4e9;
border-radius: 2px;
content: "";
display: block;
height: 4px;
margin: 5px 0;
transition: all 0.2s ease-in-out;
}
/* Create Hover Animation Effect for Mobile Nav Icon */
.navbar-toggler:hover:before,
.navbar-toggler:focus:before {
transform: scale(1.2) translateY(-7px);
height: 5px;
}
.navbar-toggler:hover span.icon-bar,
.navbar-toggler:focus span.icon-bar {
transform: scale(1.2);
height: 5px;
}
.navbar-toggler:hover:after,
.navbar-toggler:focus:after {
transform: scale(1.2) translateY(7px);
height: 5px;
}
/* Customize navbar theme */
.navbar {
background-color: #e83953;
}
/* change the Brand Icon and Icon text weight */
.navbar .navbar-brand {
font-weight: 500;
color: #1d1d2c;
font-size: 45px;
}
/* Change main nav link colors */
.navbar .navbar-nav .nav-link {
color: #1d1d2c;
transition: 650ms;
}
.navbar .navbar-nav .dropdown-toggle {
color: #1d1d2c;
transition: 650ms;
}
/* Change main nav links color when hovering */
.navbar .navbar-nav .dropdown-toggle:hover {
color: #f7f4e9;
}
.navbar .nav-item:hover .nav-link {
color: #f7f4e9;
}
/* Show link selection for keyboard navigation */
.navbar ul a.focus:focus {
outline: none;
color: #f7f4e9;
}
/* for dropdown only - change the color of dropdown */
.navbar .dropdown-menu {
background-color: #f7f4e9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.navbar .dropdown-item {
color: #e83953;
transition: 650ms;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
background-color: #e83953;
color: #f7f4e9;
font-weight: 700;
}
/* ============= DESKTOP VIEW ============= */
/* Navbar Dropdown animation */
#media all and (min-width: 768px) {
.navbar .nav-item .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: 350ms;
margin-top: 0;
}
.navbar .dropdown-menu.fade-down {
top: 80%;
transform: rotateX(-75deg);
transform-origin: 0% 0%;
}
.navbar .dropdown-menu.fade-up {
top: 180%;
}
.navbar .nav-item:hover .dropdown-menu,
.navbar .nav-item:focus .dropdown-menu {
transition: 300ms;
opacity: 1;
visibility: visible;
top: 100%;
transform: rotateX(0deg);
}
}
/* ============ desktop view .end// ============ */
/* ========== Mobile view ========== */
#media (max-width: 768px) {
.offcanvas-header {
display: block;
}
.navbar-collapse {
position: fixed;
top: 0;
bottom: 0;
left: 100%;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
visibility: hidden;
background-color: #e83953;
transition: visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.navbar-collapse.show {
visibility: visible;
transform: translateX(-100%);
}
/* Shorten link widths, except dropdowns */
.navbar ul li > a {
width: 15%;
}
}
/* ========== Mobile view ./end ========== */
/* ======================================================================================================== */
I made a toggler button with an arrow icon (when menu show) and bars (when menu close), I have made the code as shown below. The problems I am facing are:
1.) When I first clicked the toggler, the 3 bar icons became arrows. But, when I click the toggler button again, it doesn't return to 3 bar icons. So, the toggler is incompatible when it is opened and closed. What should be, when the menu shows, the arrow icon appears and when the menu is closed that appears is the 3 bar icon.
2.) I've coded in CSS for the transitions in arrows, but it still doesn't work.
Can anyone help me?
function toggleMenu() {
if ($(".navbar-toggler").hasClass("collapsed")) {
$(".navbar-toggler").removeClass("active");
} else {
$(".navbar-toggler").addClass("active");
}
}
$(document).ready(function(){
$('.navbar-toggler').on('click', function(){
toggleMenu();
});
});
.navbar-toggler {
height: 35px;
border:none !important;
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.active .icon-bar {
border-radius: 20px;
width: 35px;
}
.navbar-toggler.active .icon-bar::before {
border-radius: 20px;
width: 15px !important;
transform: rotate(-35deg);
top: -5px !important;
transition: tranform ease-in-out;
}
.navbar-toggler.active .icon-bar::after {
border-radius: 20px;
width: 15px !important;
transform: rotate(35deg);
bottom: -5px !important;
transition: tranform ease-in-out;
}
.navbar-toggler .icon-bar {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
width: 18px;
height: 5px;
display: block;
position: relative;
}
.navbar-toggler .icon-bar::before {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
top: -12px;
}
.navbar-toggler .icon-bar::after {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
bottom: -12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
In your JQuery you are checking for the "collapsed" class which is unecessary in my eyes as you always hide or show the content when you click the toggler. So you can just switch to the toggleClass() function from Jquery. I changed your code and left a comment where i made the changes. If i understood you right this is what you want it to look like
function toggleMenu() {
// the check for the "collapsed" claass is unecessary, you can simply toggle the class
$(".navbar-toggler").toggleClass("active");
}
$(document).ready(function(){
$('.navbar-toggler').on('click', function(){
toggleMenu();
});
});
.navbar-toggler {
height: 35px;
border:none !important;
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.active .icon-bar {
border-radius: 20px;
width: 35px;
}
.navbar-toggler.active .icon-bar::before {
border-radius: 20px;
width: 15px !important;
transform: rotate(-35deg);
top: -5px !important;
/*you misspelled transform and you need to add a time for the transition*/
transition: transform 1s ease-in-out;
}
.navbar-toggler.active .icon-bar::after {
border-radius: 20px;
width: 15px !important;
transform: rotate(35deg);
bottom: -5px !important;
/*you misspelled transform and you need to add a time for the transition*/
transition: transform 1s ease-in-out;
}
.navbar-toggler .icon-bar {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
width: 18px;
height: 5px;
display: block;
position: relative;
}
.navbar-toggler .icon-bar::before {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
top: -12px;
}
.navbar-toggler .icon-bar::after {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
bottom: -12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I want to have on top of the site menu like this down here. When the user scrolls down it should change the background and show another logo.
Why does this function not work? It just shows a black background all the time. I want it to be shown while scrolled down by some px.
https://codepen.io/anon/pen/XJdVYr - i want to do this
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('#menu-logo').slideDown(500);
}
if ($(window).scrollTop() < 50) {
$('#menu-logo').slideUp(500);
}
});
});
.navbar {
width: 950px;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
}
.navbar .navbar-brand {
position: absolute;
left: 0;
}
.navbar .collapse {
padding-top: 40px;
margin-left: 225px;
}
.navbar a {
text-decoration: none;
border-right: 1px solid rgb(153, 153, 153);
font-size: 14px;
font-family: 'Mada', sans-serif, Regular;
color: #000000;
padding: 10px 40px;
}
.navbar a:last-child {
border-right: none;
}
.navbar #menu-logo {
background: rgba(51, 51, 51);
width: 950px;
position: fixed;
height: 95px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
padding-bottom: 95px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<img class="navbar-brand" id="logo" src="images/img2-logo.png" alt="">
<img id="menu-logo" src="images/img-menu.png" alt="">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a class="nav-item nav-link" href="#mission">MISSION</a>
<a class="nav-item nav-link" href="#clients">CLIENTS</a>
<a class="nav-item nav-link" href="#products">PRODUCTS</a>
<a class="nav-item nav-link" href="#contact">CONTACT</a>
</div>
</nav>
See this code to over come this issue. as you wish css will changed while scrolling
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 500) {
console.log($(window).scrollTop());
$('#datacss').css("background-color", "black");
}
if ($(window).scrollTop() < 500) {
console.log($(window).scrollTop());
$('#datacss').css("background-color", "white");
}
});
});
.too-height {
min-height: 2500px;
}
.navbar {
width: 950px;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
height: 100em;
}
.navbar .navbar-brand {
position: absolute;
left: 0;
}
.navbar .collapse {
padding-top: 40px;
margin-left: 225px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="too-height" id="datacss">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<img class="navbar-brand" id="logo" src="images/img2-logo.png" alt="">
<img id="menu-logo" src="images/img-menu.png" alt="">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a class="nav-item nav-link" href="#mission">MISSION</a>
<a class="nav-item nav-link" href="#clients">CLIENTS</a>
<a class="nav-item nav-link" href="#products">PRODUCTS</a>
<a class="nav-item nav-link" href="#contact">CONTACT</a>
</div>
</nav>
</div>
I am trying to add a dropdown-menu to my navigation bar. But when i click the dropdown it doesn't show me the menu.It the menu doesn't drop down. I have looked for solutions there are other related questions. But those were code-specific problems are not relevant to my code.
If i test the dropdown code taking it outside of the navgar it works. But inside the navbar it doesn't. Can anyone please help me? If you need help regarding reading this whole or need any kind of explanation, please ask.It is i who needs help.Thanks in advance.
So here is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
//This is the part of dropdown//
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
And here is the CSS i am applying to it:
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
body{
background-color:#f1f1f1;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
overflow: hidden;
margin-bottom: 0;
border-radius: 0;
width: 100% ;
height: 30px;
}
.navbarw3 {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.main {
margin-top: 40px; Add a top margin to avoid content overlay
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 565px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
And here is the javascript:
<script>
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Based on your css classes that you used in your HTML, I assue you are using bootstrap. In that case, you really don't need to add any javascript for working with dropdown menu. make sure you linked the bootstrap css and js file in your page and then, just change the html to something like this :
<nav class="navbar justify-content-center navbar-expand-lg blackBg">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Gallery
<span class="caret"></span>
</a>
<ul class="dropdown-menu blackBg">
<li>
Smiles
</li>
<li>
Cry's
</li>
<li>
Videos
</li>
<li>
Choreography
</li>
<li>
</li>
</ul>
</li>
</ul>
here is an example : https://jsfiddle.net/dmkh8xj1/
I have just started playing with twitter bootstrap and am attempting to build a site from scrap with it. I am having trouble creating a horizontal nav bar with vertical dropdowns with each <li> as a new row. (My current dropdown has all <li> in the same row).
Can someone please teach me how?
Navbar HTML:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="NIS.html">NIS<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="TNU.html">TNU</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="NIC.html">NIC</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="trial.html">trial</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
CSS:
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
This is the answer I gave that solved a very similar problem for myself and someone else. Maybe it'll work for you.
I had a similar problem. I narrowed it down to the "display: table-cell;" entry. Through looking around and 'playing' I managed to find a fix for my situation
First:
.navbar .nav li .dropdown-menu li { display: block; width: auto; }
to set the list items under the dropdown to display as a block (with max width of the dropdown menu holder).
Secondly:
.dropdown-menu { left:auto; }
to place the dropdown under the correct menu-item.