I have a few questions about the nav-bar.
1. I would like for my nav links to be a clickable URL. When you hover I would also like a drop-down menu to appear which I have done by using this CSS .
.dropdown:hover > .dropdown-menu {
display: block;
}
My problem is the navlink is not working the URL will appear in bottom left corner but not responding when I click.
. Can you please explain why?
2. I would like for the drop-down menu to display below the bottom border of the navbar. I know I can do this with margin-bottom is there a better way to do this? My only problem my header shrinks on scroll. For some reason i can shrink the header logo but it's not allowing me to change the margin-top here is my code.
--------------------------------------------------------------------------------------------------------------------------------
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
/*THIS DOSENT WORK*/document.getElementByClassName("dropdown-menu").style.margin-top = "20px";
document.getElementById("header").style.width = "200px";
} else {
document.getElementById("header").style.width = "300px";
/*THIS DOSENT WORK*/ document.getElementByClassName("dropdown-menu").style.margin-top = "35px";
}
}
-----------------------------------------------------------------------------------------------------------------------------------------------------
Here is my whole nav bar code:
<nav class="navbar navbar-light navbar-expand-lg fixed-top">
<div class="container"><img src="Lytrod_Corporate_Logo-1.png" /><button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggler"><span>Toggle navigation</span><span></span></button>
<div class="collapse navbar-collapse d-xl-flex justify-content-xl-center"
id="navcol-1">
<ul class="nav navbar-nav">
<li class="nav-item dropdown"><a href="blank">PRODUCTS</a>
<ul role="menu" class="dropdown-menu menu-drop menu-drop-small" >
<li><a href="">blank</a></li>
<li> <a href="">blank</a></li>
<li> <a href="">blank</a></li>
<li> <a href="">blank</a></li>
<li> <a href="">blank</a></li>
<li> <a href="">blank</a></li>
<li><a href="">blank</a></li>
<li><a href="">blank</a></li>
</ul>
</li>
<li class="nav-item dropdown" id = "drop"> <a href="blank">SUPPORT</a>
<div role="menu" class="dropdown-menu">
<a href="">blank</a>
<a href="">blank</a>
<a href="">blank</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="">DEMO CENTER</a>
<div role="menu" class="dropdown-menu">
<a href="blank">blank</a>
<a href="blank">blank</a>
<a href="blank"></a>
<a href="blank">blank</a>
</div>
</li>
<li class="nav-item dropdown"><a href="https://www.lytrod.com/company/">COMPANY</a>
<div role="menu" class="dropdown-menu">
<a href="blank">blank</a>
<a href="blank">blank</a>
<a href="blank">blank</a>
<a href="blank">blank</a>
</div>
</li>
<li class="nav-item dropdown"><a href="">STORE</a>
</li>
</ul>
</div>
</div>
</nav>
... a few questions? ...
tl;dr
I like learning from video and after watching this, maybe the navbars and how they work will make more sense to you.
http://youtu.be/9cKsq14Kfsw
You can pick the video up at 7 minutes into it without missing anything really important.
I hope this helps.
... After watching, go through some of the tutorials included with Bootstrap Studio (BSS). The nav-bar is mostly drag-n'-drop, that simple. There isn't really all that much to do, really.