When viewed on mobile devices, the collapsed navbar will be unfolded when clicked on it. But it will not close when I click it again.
Here is the HTML code:
<nav id="main-nav" class="main-nav navbar-right" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" 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>
<!--//nav-toggle-->
</div>
<!--//navbar-header-->
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active nav-item"><a class="scrollto" href="index.html">Home</a></li>
<li class="nav-item"><a class="scrollto" href="project.html">Project</a></li>
<li class="nav-item"><a class="scrollto" href="download.html">Download</a></li>
<li class="nav-item last"><a class="scrollto" href="contact.html">Contact</a></li>
</ul>
<!--//nav-->
</div>
<!--//navabr-collapse-->
</nav>
And the CSS:
.header .main-nav .navbar-collapse {
padding: 0;
}
.header .main-nav .nav .nav-item {
font-weight: normal;
margin-right: 46px;
}
.header .main-nav .nav .nav-item.active a {
color: #dbdada;
background: none;
}
.header .main-nav .nav .nav-item a {
color: #fff;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
font-size: 16px;
padding: 15px 10px;
}
.header .main-nav .nav .nav-item a:hover {
color: #fff;
background: none;
}
.header .main-nav .nav .nav-item a:focus {
outline: none;
background: none;
}
.header .main-nav .nav .nav-item a:active {
outline: none;
background: none;
}
.header .main-nav .nav .nav-item.active {
color: #dbdada;
}
.header .main-nav .nav .nav-item.last {
margin-right: 0;
}
I included jquery.min.js and bootstrap.min.js, I really don't know what the problem is.
Just checked the source of vubao.co and found the issue. You have included jquery file twice on line no 168 & 173 (check it on page source). Remove one of the file and it will work fine.
Change the first line
<nav id="main-nav" class="main-nav navbar-right" role="navigation">
instead of this
<nav class="navbar navbar-default navbar-custom">
Related
Hey I have a CSS dropdown menu that drops down on hover. Unfortunately its not aligned correctly, directly under "services", but to the right of it.
How would I change it so its aligned correctly? I've been slowly adding and modifying free CSS templates to make a custom website, as I'm no coder and this is all kinda new. I'm a visual learner, so messing around until I can understand it and my way of learning..but for some reason I just can't figure this out, even after reading a bunch and thinking I had it correct.
Any help would be much appreciated!
.navbar-collapse {
text-align: center;
position: relative;
}
.site-header-white .navbar-nav>li>a,
.site-header-white .site-title {
color: #fff;
position: relative;
}
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover,
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus,
.navbar-nav>li.active>a,
.navbar-collapse li a:hover,
.dropdown.open>a,
.site-header-white .dropdown.open>a,
.dropdown-menu a:hover,
.dropdown:hover>a,
.dropdown-menu>li>a:focus,
.dropdown-menu li a:hover,
.slicknav_nav>li.active a,
.slicknav_open .slicknav_arrow,
.slicknav_nav>li a:hover {
background-color: transparent;
color: #f13a11;
}
.navbar-toggle {
border-color: #fff;
margin: 0 15px 0 0;
position: relative;
top: -1px;
}
.navbar-toggle:hover,
.navbar-toggle[aria-expanded=true] {
background-color: #fff;
border-color: #000;
cursor: pointer;
}
.navbar-toggle:hover .icon-bar,
.navbar-toggle[aria-expanded=true] .icon-bar {
background-color: #000;
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-nav .dropdown-menu {
display: inline;
opacity: 0;
visibility: hidden;
border-radius: 0;
min-width: 130px;
border: 0;
border-top: 5px solid #f13a11;
top: 140%;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
}
.navbar-nav li a:hover+.dropdown-menu,
.navbar-nav .dropdown-menu:hover {
opacity: 1;
visibility: visible;
top: 100%;
transition-delay: 0s;
display: inline-block;
}
.dropdown-menu li a {
padding: 5px 15px;
position: relative;
left: 0;
float: left;
}
.dropdown-menu li a:hover {
left: 15px;
position: relative;
}
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">GG's Aerial Photography</a>
<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" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">Services
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>Events</li>
<li>Real Estate</li>
<li>Construction</li>
<li>Damage</li>
</ul>
</li>
<li class="nav-item">
Contact
</li>
</ul>
<ul class="social-icon ml-lg-3">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</nav>
Use dropright class form bootstrap Framework
<li class="nav-item">Services
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>Events</li>
<li>Real Estate</li>
<li>Construction</li>
<li>Damage</li>
</ul>
</li>
Herewith I have provided a sample reference with your code for dropdown
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
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-content a:hover {}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {}
</style>
.
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href="index.html">GG's Aerial Photography</a>
<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" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About Us
</li>
<div class="dropdown">
<a class="dropbtn">Services</a>
<div class="dropdown-content">
Event
Real Estate
Construction
</div>
</div>
<li class="nav-item">
Contact
</li>
</ul>
<ul class="social-icon ml-lg-3">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</nav>
So I have this code:
.hoverlist12:hover #details {
display: block;
}
The thing is the list doesn't appear at all. If I change the hoverlist12 class with the ul, it works fine, but it appears when I hover on all the elements, and I want it to appear when I hover it only on the first "li". Usually, I have no problem doing this but now I just can't figure it out.
.navbar {
border-radius: 0;
max-height: 50px;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover {
color: #ffffff;
transform: scale(1.1);
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
color: #ffffff;
}
.navbar-default .navbar-nav > li:focus,
.navbar-default .navbar-nav > li:hover {
background-color: rgba(0, 0, 0, 0.15);
}
nav {
font-family: "ITCErasStd-Medium";
}
.hiddeOnTop {
visibility: hidden;
}
.container-fluid {
padding-right: 3%;
padding-left: 3%;
display: inline-block;
width: 100%;
}
.navbar-default,
.container-fluid {
background-color: #be3c7a;
}
.nav > li > a {
font-size: 1.1em;
}
.navbar .facebook {
padding: 0;
margin-top: 7px;
}
.navbar .facebook:hover {
background: none;
transform: scale(1.1);
}
.navbar-brand,
.nav > li.active > a {
font-family: "ITCErasStd-Bold";
}
#details {
padding: 26px 30px;
display: none;
color: white;
z-index: 900;
font-size: 2rem;
list-style-type: none;
position: absolute;
margin-top: 50px;
background-color: #be3c7a;
}
.hoverlist12:hover #details {
display: block;
}
<nav class="mobile_nav">
<button type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav-content">
<li>
<a href="htps://www.facebook.com" alt="facebook" class="facebook"
><img
src="./img/fb-icon.svg"
alt="fb-icon"
onerror="this.src='./img/fb-icon.png'"
/></a>
</li>
<!-- <li class="homelk">HOME</li> -->
<li class="homelk">
CE ESTE adadsadassssss
</li>
<li>INTREBARI FRECVENTE</li>
<li>PARTENERI</li>
<li>CONTACT</li>
<!-- <li><i class="fa fa-facebook-official"></i></li> -->
</ul>
</nav>
<!-- //////////////////////////// NAVBAR \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
<nav class="navbar navbar-default">
<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>
<a class="navbar-brand navigate" href="#home"><span>HOssME</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right dropdown">
<li class="hoverlist12">
CE ESTE USCACIUNEA
</li>
<ul id="details">
<li>Manifestari</li>
<li>Femeia activa</li>
<li>Maternitatea</li>
<li>Menopauza</li>
<li>Sub tratament</li>
</ul>
<li> DE CE HAYLO GYN </li>
<li> INTREBARI </li>
<li>CONTACT</li>
<li>
<a href="htps://www.facebook.com" alt="facebook" class="facebook"
><img
src="./img/fb-icon.svg"
alt="fb-icon"
s
onerror="this.src='./img/fb-icon.png'"
/></a>
</li>
<!-- <li><i class="fa fa-facebook-official"></i></li> -->
</ul>
</div>
</div>
</nav>
Use selector like this: .hoverlist12:hover ~ #details Because #details and .hoverlist12 elements are siblings or at same level. You can use this selector only .hoverlist12:hover #details when #details is a child element of .hoverlist12. So, please change your CSS code as I suggested OR Please change your structure like:
<li class="hoverlist12">
CE ESTE USCACIUNEA
<ul id="details">
<li>Manifestari</li>
<li>Femeia activa</li>
<li>Maternitatea</li>
<li>Menopauza</li>
<li>Sub tratament</li>
</ul>
</li>
So I am trying to make my dropdown actually appear below the navbar like in the shown picture
Here is my html:`
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#myNavbar">
<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="navbar-brand logo" href="#"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false">blah
<!-- <span class="caret"></span> -->
</a>
<ul class="dropdown-menu" role="menu">
<li>blah1</li>
<li>blah 2</li>
<li>blah 3</li>
</ul></li>
<li>blah</li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false">blah
</a>
<ul class="dropdown-menu" role="menu">
<li>blah</li>
<li>blah & blah</li>
<li>blah</li>
</ul></li>
<li> blah</li>
<li>blah</li>
<li><img src="../images/search.png"/></li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
</div>
Here is my css:
.icon--house, .modal button, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block
}
.navbar-default {
background-color: #030303 !important;
border: #030303;
}
.nav > li > a {
padding: 25px 20px;
font-size: 16px;
}
/* bigger menu items in dropdown */
.dropdown-menu > li > a {
padding: 20px;
}
/* removes whitespace in dropdown from navbar */
.dropdown-menu {
padding: 0;
float: right;
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu>li>a:hover {
color: #FFF;
background-color: #da1a32;
text-decoration: none;
}
.navbar .navbar-nav > li > a {
color: #FFF !important;
border-bottom: transparent solid 3px;
padding-bottom: 5px;
}
.navbar .navbar-nav > li > a:hover {
border-bottom: #da1a32 solid 3px;
}
a:link {
text-decoration: none;
color: #FFF !important;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}
.align-center, .missing {
text-align: center
}
body {
font-family: Montserrat, sans-serif;
font-weight: 300;
line-height: 1.4;
color: #202020;
overflow-x: hidden
}
img {
max-width: 100%;
height: auto
}
a {
transition: .3s ease;
text-decoration: none
}
h1 {
font-size: 30px;
line-height: 1.1;
margin-bottom: .5em
}
this is what I want it to appear like:
And this is what It looks like overlapping the actual navbar:
I've tried some different things such as adding a margin to the bottom of my header but it did not help. If anyone could help it would be greatly appreciated, as I'm not sure where to go from here. If you could also tell me exactly what css it was that needed to be change that would be great. Thanks.
You just need to adjust the 'top' value on the .dropdown-menu class, which is absolute positioned. probably at 100% now
.dropdown-menu {
top: 100%;
}
this will make it line up with the bottom of the li.dropdown > a element,
so if you have 20 extra px of black background from navbar padding, try this:
.dropdown-menu {
top: calc(100% + 20px);
}
The fixed navbar was working but suddenly it stopped on Firefox. When I tried on other browsers (chrome, ie, opera) it works right now but not on FF. I tried to start FF in safe mode but no difference. What is wrong?
.nav-tabs li a {
color: #777;
}
.navbar {
margin-bottom: 0;
background-color: #153870;
border: 0;
font-size: 15px !important;
letter-spacing: 4px;
opacity:0.9;
}
.navbar li a, .navbar .navbar-brand {
color: #ffef03 !important;
}
.navbar-nav li a:hover {
color: #3AA83D !important;
}
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.open .dropdown-toggle {
color: #ffef03 ;
background-color: #153870 !important;
}
.dropdown-menu li a {
color: #ffef03 !important;
}
.dropdown-menu li a:hover {
background-color: #153870 !important;
}
<nav id="myNB" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavb">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Obrakadabra!..</a>
</div>
<div class="collapse navbar-collapse" id="myNavb">
<ul class="nav navbar-nav navbar-right">
<li>Askerleri</li>
<li>Koç Hakkında</li>
<li>Ne dediler?</li>
<li>O ne dedi?</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dahası
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Mekanı</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I use Navbar-toggle for showing group menus on mobile devices but it's not working! What is the problem? The Following is my code and JsFiddle.
Actually When I give class navbar-toggle the button disapear!
HTML:
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-right navbar-nav navbar-collapse collapsed" id="menu">
<li class="active" id="home">Home</li>
<li>Services</li>
<li>About</li>
<li>Tel</li>
</ul>
<img id="logo" src="images/logo.png" class="img-responsive">
</nav>
CSS:
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f7f7f7;
box-shadow: 0 4px 2px -2px #dedede;
}
.navbar-nav > li:first-child > a{
background-color: #01a89e;
color: white;
}
.navbar-nav > li:first-child a:hover, .navbar-nav > li:first-child a:active {
background-color: #01a89e;
}
.navbar-nav li a:hover{
background-color: #dedede;
}
.navbar-nav{
margin-top: -1px;
}
.navbar-nav li:not(:first-child){
border-left: 1px solid #dedede;
margin-bottom: -3px;
}
.navbar-nav li:hover{
/*border: none;*/
}
.navbar-nav li a{
color: #606060;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: -3px;
}
#logo{
width: 120px;
}
JsFiddle
As #JackRyder said, navbar-default is missing class on nav Element, adding that shows up button and toggling as well. JSFiddle
I had a same problem, fixed it by setting navbar-dark in <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">