Inspiring

Answered

Make Nav Bar Responsive

Forum|Forum|6 years ago
October 31, 2019
4 replies
2305 views

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>

This topic has been closed for replies.

Correct answer Nancy OShea

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

Community Expert

Hover is not mobile friendly.

Click / tap are mobile friendly.

Nancy O'Shea— Product User & Community Expert

fcbg1234Author

Inspiring

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.

Nancy OSheaCorrect answer

Community Expert

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 O'Shea— Product User & Community Expert

osgood_

Brainiac

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

fcbg1234Author

Inspiring

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

<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>

</nav>
</div>

Jon Fritz

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded