Make Nav Bar Responsive

[fcbg1234]

I'm trying to make this nav bar responsive at 767px and having no luck.  I'm sure i'm asking too much but any suggestions would be welcomed.  My responsive code was too embarrassing to include.

CSS
	
	body{
		width:100%; 
		padding:10px 0; 
		margin:0 auto; 
		font-family:Calibri, sans-serif; 
	}
	#nav{
		list-style:none;
		margin:0;
		padding:0;
		text-align:center;
		background-color: #404040;
	}
	#nav li{
		position:relative;
		display:inline;
	}
	
	#nav li:last-child { 
  		border-bottom: 1px solid #404040; 
	}
	#nav a{
		display:inline-block;
		padding: 10px 20px 10px 20px;
		color:#fff;
		text-decoration:none;
	}
	#nav ul{
		position:absolute;
		left:-9999px;
		margin:0;
		padding:0;
		text-align:left;
	}
	#nav ul li{
		display:block;
		width: 200px;
		background:#f9f9f9;
		border:solid 1px #333;
		border-bottom: 0px solid #333;
	}
	#nav li:hover ul{
		left:0;
	}
	#nav li:hover a{
		text-decoration:none;
		background:#555;
	}
	#nav li:hover ul a{
		text-decoration:none;
		background:none;
	}
	#nav li:hover ul a:hover{
		text-decoration:none;
		background:#ddd;
	}
	#nav ul a{
		white-space:nowrap;
		display:block;
		color: #333;
	}
	#nav ul ul {
		display: none;
		position: absolute; 
		top: -1px; 
		left: 230px;	
	}	
	#nav ul li:hover > ul {
		display:block;
	}	
	#nav ul ul li {
		width: 230px;
		float:none;
		display:list-item;
		position: relative;
	}
	#nav ul ul ul li {
		position: relative;
		left:230px;
	}
	#nav ul ul li {
		left: 200px;
		display: block;
	}	
i {
  display: inline-block;
  padding: 0px;
  margin-left: 8px;
}

HTML

	<ul id="nav">
	<li><a href="#">Link One</a></li>
	<li><a href="#">Link Two</a></li>
  
	<li>
	<a href="#">Drop Down Link</a>
	<ul>
		<li><a href="#">Drop Down Link</a></li>
		<li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
	</ul>
	</li>

	<li>
	<a href="#">Drop Down Link Sub Menu</a>
    
	<ul>
		<li><a href="#">Drop Down Link</a></li>
		<li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
   <li>
    <a href="#">Drop Down Sub Menu<i class="fa fa-caret-right"></i></a>
	<ul>
		<li><a href="#">Sub Menu Link</a></li>
		<li><a href="#">Sub Menu Link</a></li>
    	<li><a href="#">Sub Menu Link</a></li>
    </ul>
    </li>
    </ul>
	</li>


	<li><a href="#">Link Five</a></li>
	<li><a href="#">Link Six</a></li>
	<li><a href="#">Link Seven</a></li>

	</ul>

[Jon Fritz]

Run the tutorial here, it does a pretty good job of covering the basics of Media Queries: 

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

[osgood_]

You want a responsive navigation and are using css hover to trigger the dropdowns............

[fcbg1234]

Yes that is what i wanted.  Is hovering to trigger the dropdown not a good practice?

I found some script for a dropdown and tweeked it to work with my menubar.  It seems to be working with the hover to trigger the dropdown and then when responsive you click to trigger the dropdown as it wasn't working well with the hover when responsive trying to get to the other menu items.

Here is what i came up with.

Thanks for the help!

CSS

body {
font-family: Helvetica, Arial, sans-serif;
padding: 0px auto;
margin: 0px auto;
color: #555;
background: #fff;
overflow-y:scroll;
font-size: 93%;
-webkit-text-size-adjust: 100%;
}

.menubar{
background-color: #404040;

z-index: 1;
text-align: center;
}
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0px;
padding: 0px;
background-color: #404040;


}
nav:after {
content: "";
display: table;
clear: both;
}

nav ul {
padding: 0px;
margin: 0px;
list-style: none;
text-align:center;
position: relative;
display: inline-block
}

nav ul li {
margin: 0px;
display: inline-block;
text-align: left;
background-color: ;
border-top: 1px solid #404040;
border-left: 1px solid #404040;
border-right: 1px solid #404040;
z-index: 1;
}
nav ul ul li:last-child {
border-bottom: 1px solid #404040;
}
nav a {
display: block;
padding: 0 15px;
color: #FFF;
font-size: 14px;
line-height: 35px;
text-decoration: none;
}
nav ul li ul li:hover {
background: #ddd;
}
nav a:hover {
background-color: #555;
}
nav ul li li a{
display: block;
width: 100%;
color: #333;
font-size: 14px;
line-height: 35px;
}
nav ul li li a:hover{
background: #ddd;
width: 190px;
}
nav ul ul {
display: none;
position: absolute;
top: 36px;
}
nav ul li:hover > ul {
display: inherit;
font-color: #000;
}
nav ul ul li {
width: 230px;
float: none;
display: list-item;
position: relative;
background: #f9f9f9;
}
nav ul ul ul li {
position: relative;
top: -37px;
left: 230px;
}
li > a:after {
content: ' ';
}
li > a:only-child:after {
content: '';
}
i {
display: inline-block;
padding: 4px;
margin-left: 8px;
}

/*---------------------------------------- MEDIA QUERIES ---------------------------------------- */
@media all and (max-width : 1160px) {

div.menubar{
width: 100%;
padding-left: 0px;
background-color: #404040;

}
nav {
margin: 0;
}
nav a {
font-size: 12px;
padding: 0 14px;
}
.toggle + a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: #404040;
padding: 0 14px;
color: #FFF;
font-size: 12px;
line-height: 35px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #555;
}
nav ul ul .toggle:hover {
background-color: #ddd;
}
[id^=drop]:checked + ul {
display: block;
}

nav {
text-align: left;

}

nav ul li {
display: block;
width: 100%;

}
nav ul ul li .toggle,
nav ul ul a {
padding: 0 40px;
color: #000;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
color: #000;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #555;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #f9f9f9;
}
nav ul ul {
float: none;
position: static;
color: #f9f9f9;

}
nav ul ul ul a {
background-color: #f9f9f9;

}
nav ul ul ul ul ul ul a:hover {
background-color: ;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
nav ul ul li {
display: block;
width: 100%;
margin-bottom: -1px;
margin-left: -1px;

}
nav ul ul ul li {
position: static;
}
nav ul li li a{
line-height: 35px;
font-size: 12px;
}
nav ul li li a:hover{
background: #ddd;
width: 210px;
}
i {
display: inline-block;
padding: 4px;
margin-left: 8px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
border: solid #000;
border-width: 0 1px 1px 0;
}

}

@media screen and (max-width:767px)
{
.toggle + a,
.menu {
display: none;
overflow:auto;
overflow-x:hidden; // hides the horizontal scroll
overflow-y:auto;
max-height: 285px;
}

/* width */
.toggle + a,
.menu::-webkit-scrollbar {
width: 3px;
}

/* Track */
.toggle + a,
.menu::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
}

/* Handle */
.toggle + a,
.menu::-webkit-scrollbar-thumb {
background: #f60;

}
}

HTML

<div class="menubar">

<nav>

<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop">

<ul class="menu" >

<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>

<li>
<label for="drop-1" class="toggle">Drop Down<i class="fa fa-caret-down"></i></label>
<a href="#">Drop Down<i class="fa fa-caret-down"></i></a>
<input type="checkbox" id="drop-1">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</li>

<li>
<label for="drop-2" class="toggle">Sub Drop Down One<i class="fa fa-caret-down"></i></label>
<a href="#">Sub Drop Down One<i class="fa fa-caret-down"></i></a>
<input type="checkbox" id="drop-2">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>

<li>
<label for="drop-3" class="toggle">Sub Drop Down One<i class="fa fa-caret-down"></i></label>
<a href="#">Sub Drop Down One<i class="fa fa-caret-right"></i></a>
<input type="checkbox" id="drop-3">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</li>
</ul>
</li>

<li>
<label for="drop-4" class="toggle">Sub Drop Down Two<i class="fa fa-caret-down"></i></label>
<a href="/#">Sub Drop Down Two<i class="fa fa-caret-down"></i></a>
<input type="checkbox" id="drop-4">
<ul>
<li>
<label for="drop-5" class="toggle">Sub Drop Down One<i class="fa fa-caret-down"></i></label>
<a href="#">Sub Drop Down One<i class="fa fa-caret-right"></i></a>
<input type="checkbox" id="drop-5">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</li>

<li>
<label for="drop-6" class="toggle">Sub Drop Down Two<i class="fa fa-caret-down"></i></label>
<a href="#">Sub Drop Down Twp<i class="fa fa-caret-right"></i></a>
<input type="checkbox" id="drop-6">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</li>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
</ul>
</li>


<li><a href="#">Contact Us</a></li>


</ul><!------/<ul class="menu">------->

</nav>
</div><!----- /menubar ----->

[Nancy OShea · Accepted solution]

Use Bootstrap's responsive framework to build your site. It will save you a lot of time and trouble.   Below is a Bootstrap navbar with a centered placeholder image for your logo.

Copy & paste the following code into a new, blank document.  Save as test.html and preview in different devices and screen widths.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
/**styles for large devices**/
@media (min-width: 990px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
/**optional offset from top**/
top: 2%;
}
}
</style>
</head>
<body>
<nav id="topNav" class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand mx-auto" href="/"> 
<!--Your logo goes here--> 
<img class="navbar-brand rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand"> </a> 
<!--Hamburger icon-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse"> 
<!--Links-->
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<!-- Dropdown -->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a>
<div class="dropdown-menu"> 
<a class="dropdown-item" href="#">Link 1</a> 
<a class="dropdown-item" href="#">Link 2</a> 
<a class="dropdown-item" href="#">Link 3</a>
<!--end dropdowns--></div>
</li>
<!--end left side links--></ul>

<!--right side links-->
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
</ul>
</div>
<!--end navbar--></nav>

<!--begin jumbotron-->
<div class="jumbotron jumbotron-fluid text-center"> <img class="img-fluid" src="https://dummyimage.com/900x500" alt="placeholder">
<h1 class="display-4">Bootstrap with Dreamweaver</h1>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p>
<!--end jumbotron--></div>

<div class="container">
<div class="row">
<div class="col-md-8 align-self-center">
<h3>Responsive YouTube Video</h3>
<div class="embed-responsive embed-responsive-16by9">
<!--embed code from YouTube-->
<iframe width="560" height="315" src="https://www.youtube.com/embed/fqpsgH70fYk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-4 align-self-center">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat natus explicabo soluta sit alias eligendi, quod, unde modi dolor nostrum. Nobis cumque, eos dignissimos neque autem inventore necessitatibus ut eveniet!</p>
</div>
</div>
<hr>
<div class="row">
<div class="text-center col-lg-6 offset-lg-3">
<h4>Footer </h4>
<p class="small"> &copy; 2019 &middot; All Rights Reserved &middot; XYZ Website</p>
</div>
</div>
</div>

<!--Supporting scripts. First jQuery, then popper, then Bootstrap JS--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

[Nancy OShea]

Hover is not mobile friendly.

Click / tap are mobile friendly. 

[fcbg1234]

Got it but not a problem here as when it's on smaller screens and responsive you click to trigger the menu and dropdowns.

It's hover in desktop mode down to 1160px then becomes click.  The reason for 1160px is that there are more menu items in the menubar then i had in my expample.

Thanks for your input and example.   

[fcbg1234]

One last question.  I added a sticky script for the nav bar but when responsive on small screens when you select a drop down you can not see all the drop down links.  To fix that i added the scroll bar script to kick in at 767px.  Is there a way to have all the drop down links visible with out the scroll bar script when using the sticky code as i works fine with out the sticky code. 

Here is my codepen example,  https://codepen.io/ikeevens/pen/ZEEoovW

[Nancy OShea]

The current trend in responsive web design is to keep navigation simple and on one level wherever possible.  Complex multi-level menus should be avoided on mobile devices.   Also you have a fixed menu which is not the same as a sticky.

https://www.w3schools.com/howto/howto_css_sticky_element.asp

[fcbg1234]

I hear ya, and may have to re-think that but it is working for the most part other than not being able to see all the drop down items with out the additional scroll at 767px.  

I'm a little confused on the fixed to sticky menu.  I got the sticky code from ws3 schools as you suggested.  And in my codepen you should see that the menubar sticks to the top after scrolling past the header and then the body-content and footer scroll up under the navbar at that point. Isn't that sticky??

I appreciate your suggestions.