I have a navbar in my website in which I am using Bootstrap's scrollSpy to keep track of the section I am viewing. Now I have decided to add drop down menu's to my navbar and added one which triggers on hover instead of the click.
I used the solution in this SO answer to achieve the drop down menu on hover. However, since I am using scrollspy, a click on the li item will take me to that section. However, after adding the drop down, clicking the li item does not take me to that section.
Also Since the hover trigger is disabled in responsive mode, clicking on the li item does not open the dropdown menu as well.
Now having scrollspy in responsive mode is not necessary since the menu is anyway going to be collapsed.
This is my navbar section :
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<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" href="">
<!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> -->
SRS Constructions
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#main">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#about" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a href="about.html">Founder</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Our Projects</a></li>
<li><a href="#whyus">Why Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
This is my css for my navbar:
@media (min-width: 767px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
@media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand > img {
width: 40%;
position: relative;
display: inline-block;
height: auto;
margin-left: 90px;
margin-top: -80px;
}
#footer {
color: #2e2e2e;
}
}
@media (min-width: 767px) {
#footer {
color: #ffffff;
}
}
.navbar-brand > img {
width: 30%;
position: relative;
display: inline-block;
height: auto;
margin-left: 50px;
margin-top: -15px;
}
The href in the dropdown menu li item is the one which causes the trouble. I want to maintain both scrollspy as well as on hover on normal screen width and only hover (which will be click) and not scrollspy in responsive mode (I don't mind if it works also).
Please tell me how I can achieve this since both seem to contradict each other on implementation.
EDIT:
The about li is the one which I am using to test the scrollspy and hover element:
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#about" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a href="about.html">Founder</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
- Clicking on the first about works - > it navigates to the about section.
- Clicking on the second about does not word -> scroll spy does not work however the hover works.
I want to combine both the functionalities together.
The website can be viewed here (incase of on the fly editing)
