Any advice for making a responsive nav menu?

I have a working HTML code and I have a big problem with the CSS part. I want to make my nav menu responsive, but to no avail.

I do not ask you to give me a solution code, but could anyone kindly point out what I can pay attention to or other tips or any other directions (or links, name of books etc). Thank you so much for the advice in advance.

For your reference my code looks like this (this is non-JS navbar project).

HTML

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>CSS Menus</title>
		<link rel="stylesheet" type="text/css" href="assets/menue.css">

	</head>
	<body>
		<header>
			<a class="logo" href="#"><span>Everyday Things</span></a>
			<nav>
				<input class="menu-btn" type="checkbox" id="menu-btn" />
                <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
				<ul >
					<li><a href="#" aria-haspopup="true">About Us</a>
					    <ul>
							<li><a href="#">Sub Link1</a></li>
							<li><a href="#">Sub Link2</a></li>
						</ul>
					</li>
					<li><a href="#">Products</a></li>
					<li><a href="#" aria-haspopup="true">Design Corner</a>
						<ul>
							<li><a href="#">Sub Link1</a></li>
							<li><a href="#">Sub Link2</a></li>
							<li><a href="#" aria-haspopup="true">Sub Link3</a>
								<ul>
									<li><a href="#">Sub Link4</a></li>
									<li><a href="#">Sub Link5</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Contact Us</a></li>
				</ul>
			</nav>
		</header>		
		<article>
			<div>
				<h1>What&rsquo;s Trending:  Creating Your Own Spa</h1>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Duis aute irure dolor in <a href="#">reprehenderit in voluptate</a> velit esse cillum dolorte eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</div>
		</article>
		<aside>
			<div>
				<h3>Customer spotlight</h3>
				<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
			</div>
		</aside>
		
	</body>
</html>

CSS

body {
  color: #777;
  font-size: 16px;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
h1 {
  margin: 0px 0px 1em 0px;
  color: #076d6f;
  font-size: 1.7em;
}
h3 {
  margin: 0px 0px 1.5em 0px;
  color: #339999;
  font-size: 1.1em;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
}
a {
  color: #00a2ff;
  text-decoration: none;
}

header {
  height: 250px;
  background: #eee url(banner.jpg) no-repeat center;
  background-size: cover;
  margin-bottom: 50px;
  position: relative;
}
header a.logo {
  position: absolute;
  display: block;
  width: 154px;
  height: 57px;
  background: url(logo.png) no-repeat 0 0;
  background-size: contain;
  z-index: 1;
  top: 15px;
  left: 20px;
}
header a.logo span {
  display: none;
}

article {
  width: 70%;
  float: left;
  margin-bottom: 75px;
}
article div {
  padding: 0px 40px 0px 40px;
  border-right: 1px solid #555;
}
aside {
  width: 30%;
  float: left;
}
aside div {
  padding: 0px 40px 0px 40px;
}

nav {
  background-color: rgba(0, 0, 0, 0.6);
  position: relative;
  padding: 45px 0px 0px 180px;
}

/* Add menu rules here */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;

}

nav ul::after {
  content: "";
  display: block;
  clear: both;
}

nav ul li:hover {
  background-color: rgba(0, 102, 102, 0.8);
}

nav ul li:hover > ul {
  display: block;
}

nav ul li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #339999;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  background-color: rgba(0, 102, 102, 0.8);
}

nav ul ul li {
  position: relative;
}

nav ul ul ul {
  left: 100%;
  top: 0;
}

/* top level */
nav > ul {
  padding-left: 35px;
}

nav > ul > li {
  float: left;
}

nav > ul > li > a {
  padding: 10px 20px 15px 20px;
  width: auto;
}

/*NA on desktop*/
.nav-menu-select {
  display: none;
}
.nav-hamburger{
  display: none;
}

@media screen and (max-width: 750px) {
  header a.logo {
    width: 60%;
    height: 15%;
  }
  article {
    width: 100%;
    float: none;
    margin-bottom: 2.2rem;
  }
  article div {
    margin: 0 1.6rem;
    padding: 0 0 1.2rem 0;
    border-right: none;
    border-bottom: 0.1rem solid #555;
  }
  aside {
    width: 100%;
    float: none;
  }

  aside div{
    padding: 0px 1.9rem 0px 1.9rem;
  }

  

  nav li {
    float: left;
  }
  nav li a {
    padding: 20px 30px;
  }
  nav .menu {
    clear: none;
    float: right;
    max-height: none;
  }
 
}






Hi,

from a quick look at your code I have 3 ideas at what might be of interest for you:

  1. I see that you position the logo absolute. I would rather advise against that. A layout with a lot of elements positioned absolute is extremely challenging for responsive adjustments. If you want to have a fixed navbar, better just position the wrapping container absolute or fixed.

  2. From the layout I see you might be better off with flexboxes. For responsiveness you can play around with the flex-direction (row for the horizontal displayal on large screens and column for small screens). This is a good flexbox guide.

  3. I also saw that you want to use a hamburger menu on small screens, right? Then I would recommend that you take a look at how Bootstap does that. Iā€™m not suggesting that you actually use Bootstrap, but you could use the devtools and have a look at how they organize the CSS. They also use Javascript for the toogling, but you might get away without that by using pseudo classes for toggling the display: block and display: none properties.

2 Likes