I have a boostrap navbar with white links on black. When I reload the page the links are black until I select them with my cursor which causes the white to appear as I slide. The problem is solved if I add a blank href="" attribute. However I would like to figure out why this is happening and if there is another solution.
<ul class="nav navbar-nav pull-right">
<li><a ui-sref="home">Home</a></li>
</ul>
This solves issue:
<ul class="nav navbar-nav pull-right">
<li>Home</li>
</ul>
Attached is a shot of what I mean - I am slidig the mouse from left to right over the link.
Related
I'm using this little jQuery-Plugin in order to enable a smooth scroll to a specific place on the page and also to mark the currently active menu item, so when you scroll down, you see where you are in the menu.
Now I do basically have the exact same code (at least I can't find the difference) as on the GitHub page, but its not working, although on the original template (which I'm using) it's working, so the plugin itself is working fine it seems, but I just can't seem to find the problem.
Basically I have my menu:
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav mr-auto w-100 justify-content-end clearfix">
<li class="nav-item active"><a class="nav-link" href="#sliders"> Home </a></li>
<li class="nav-item"><a class="nav-link" href="#feature"> Features </a></li>
<li class="nav-item"><a class="nav-link" href="#pricing"> Kosten </a></li>
<li class="nav-item"><a class="nav-link" href="#contact"> Kontakt </a></li>
</ul>
</div>
and then I have the different sections/divs, just like so:
<div id="sliders">
<div class="full-width">
<!-- light slider -->
<div id="light-slider" class="carousel slide"><div id="carousel-area">//some content</div></div>
</div>
</div>
Now the really weird thing is, that scrolling through the navbar works fine, so if I click on contact, for example, it scrolls to the right place.
But when I scroll myself, then wrong items are marked, it's always one behind, so if I'm on top, then "Features" is marked, if I've actually scrolled to the features, then the costs are marked, and so on...
You can see this in action here.
Please ignore any faults on not appearing icons, typos or whatever, I'm just testing or just started to develop.
On there, you can perfectly check the behavior and also check the ids of the sections/divs, which seem to perfectly fit through (otherwise, the scrolling through navbar shouldn't work).
Anybody can tell about the problem? I don't get it...
I'm using Bootstrap 3.3.4
I've following HTML code.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul id="projects-menu" class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now using jQuery I'm hiding the sub-menus coming under main-menu 'Projects' as follows :
$(document).ready(function() {
$("ul#projects-menu").children().hide();
});
The menu gets hide but a small white background appears beneath the menu which I don't want. For better understanding of my issue please refer below image. In this image you can see the white background appearing beneath the 'Projects' menu.
Can someone please help me in this regard?
Thanks.
Try the following:
$(document).ready(function() {
$("ul#projects-menu").hide();
});
hide the meniu not the li's
$('#projects-menu > li > a').on('click', function() {
$(this).children('#projects-menu').hide();
});
also you can like this
$(this).find("#projects-menu > li").hide();
http://codepen.io/ruchiccio/pen/ONvoaE
I have a navbar with a dropdown menu. This dropdown menu has a few children, one of which is also a dropdown list (i.e. Brands). When I click this dropdown list and then close it up again with the toggle caret, the 1px border around my entire navbar-collapse div disappears. I can't see what causes that to happen.
I also get weird border changes when I click the Brands dropdown, toggle it closed, and then try clicking a regular link in the dropdown menu (i.e. About).
Here is what the code looks like:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Brands<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>Brand 1</a></li>
...
I figured out a solution. I gave navbar-collapse absolute positioning, with right:0 to keep it at the right side of the screen. Apparently, floating doesn't agree with the collapse.
I've created two dropdown using navbar-right.
Here's the fiddle for it.
Issue is... It is working fine in desktop and large screens.
If I resize the browser window. The dropdown gets in a list view with the entire width of the screen when re-sized.
Re-size the result window and you'll come to know my problem.
Help me to overcome this.
Thanks in advance.
This isn't really the way to use a Bootstrap navbar. The idea of the navbar is that it collapses down on mobile, which is what you're seeing happening here. Except, in the Bootstrap navbar, you are supposed to put some containers with specific class names and a <button> etc. You're code just seems to be using navbar-right for the sake of floating it right.
Try this instead. It's 1 list, each <li> has a dropdown. There's no navbar classes. Note that I've added the class nav. This just gives the <a> some padding and colouring on hover etc. You can remove that class and style as required. I also added the class 'pull-right' which is Bootstrap's helper class for floating right.
<div>
<ul class="pull-right nav">
<li class="dropdown">
<i class="glyphicon glyphicon-comment"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="dropdown">
<i class="glyphicon glyphicon-home"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li> Two</li>
<li> Three</li>
</ul>
</li>
</ul>
</div>
Some CSS
div > ul > li {
float: left;
}
This won't be responsive like the navbar, but that seemed to be the problem in the first place.
DEMO
I've been trying out solutions to similar cases but none of them work so far.
Here's the problem, I have 2 html files total. On my navigation bar, I have 4 options. 3 of them refer to id's on the same page(index) and the 4th refers to the separate page. Now coming from the separate page back to the index, the active menu item isn't the right "active" one. Like if I click on 'about' on the support page, the active menu item is 'home'. or if I click on 'contact', the active menu item becomes 'about'. The content that appears is correct. But the active menu item isn't.
Here's from the index.html file:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="current">Home</li>
<li>About</li>
<li class="support" >Support</li>
<li >Contact</li>
</ul>
</div>
and here's from support.html:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="current">Support</li>
<li >Contact</li>
</ul>
</div>
This is one of the solutions that I tried with no results:
https://stackoverflow.com/a/11539359
JS is not my strong suit, thank you so much for your help!
There were lot of issues with the way you are loading scripts for example
$(document).ready(function() {
$('#ind').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
you are calling this before the jquery is loaded so it gives $ is undefined error, so the solution is to move all the script at the end, and there is one inline script also for menu handler, move that to document ready functions
I have included the fix in the following file HTML Zip files, you will find all JS moved to end. Its working fine for me now
One more thing make your contact height same as other container or remove extra margin/padding from Physicians section