Having Trouble With Navbar and Sub Menus

**nootkan** · 03-12-2023, 09:54 PM

Hi all, been trying to create a navbar for one of my websites and seem to be running into an issue with sub menus.

Hopefully someone here can see where I am going wrong or what I've missed.

Working in notepad++ and using Firefox and Chrome to check work.

My goal is to create a navbar for the top of the page which has 9 links to other pages with two of the links including dropdowns.

One of the dropdowns has sub menus. This is where I am running into problems.

When only using sub menus for one of the dropdown links it seems to work just fine, however when adding the sub menus to all the links in the drop down menu it isn't sliding properly when viewed at smaller resolutions ie: mobile devices.

It does however seem to work fine at full resolution in both browsers.

Can't provide a live link yet as I have the folder protected to not allow others access for security reasons. Will provide access once I get some replies if needed but will block access again once resolved.

Here is my code for the html, css and js:

Code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Navbar Test</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="drpDownNav2.css">
    <!-- Boxicons CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <link rel="canonical" href="temp/drpDownNav2.html">
    <script src="drpDownNav.js" defer></script>
  </head>
  <body>
    <nav>
      <div class="navbar">
        <i class='bx bx-menu'></i>
        <div class="nav-links">
          <div class="sidebar-logo">
            <i class='bx bx-x' ></i>
          </div>
          <ul class="links">
            <li><a href="/">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Braggin</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Forum</a></li>
            <li>
              <a href="#">Product Reviews</a>
              <i class='bx bxs-chevron-down htmlcss-arrow arrow  '></i>
              <ul class="htmlCss-sub-menu sub-menu">
                <li class="more">
                <span><a href="#">Accessories</a>
                    <i class='bx bxs-chevron-right arrow more-arrow'></i>
                  </span>
                  <ul class="more-sub-menu sub-menu">
                    <li><a href="#">Apparel</a></li>
                    <li><a href="#">Footware</a></li>
                  </ul>
                </li>
                <li class="more">
                <span><a href="#">Boat Motors</a>
                    <i class='bx bxs-chevron-right arrow more-arrow'></i>
                  </span>
                  <ul class="more-sub-menu sub-menu">
                    <li><a href="#">Electric Motors</a></li>
                    <li><a href="#">Outboard Motors</a></li>
                  </ul>
                </li>
                <li class="more">
                <span><a href="#">Tackle</a>
                    <i class='bx bxs-chevron-right arrow more-arrow'></i>
                  </span>
                  <ul class="more-sub-menu sub-menu">
                    <li><a href="#">Lures</a></li>
                    <li><a href="#">Nets</a></li>
		    <li><a href="#">Tackle Boxes</a></li>
                  </ul>
                </li>
                <li class="more">
                  <span><a href="#">Rods N Reels</a>
                    <i class='bx bxs-chevron-right arrow more-arrow'></i>
                  </span>
                  <ul class="more-sub-menu sub-menu">
                    <li><a href="#">Bait Casting Reels</a></li>
                    <li><a href="#">Bait Casting Rods</a></li>
                    <li><a href="#">Ice Fishing Rods N Reels</a></li>
                    <li><a href="#">Salmon Rods N Reels</a></li>
                    <li><a href="#">Spinning Reels</a></li>
                    <li><a href="#">Spinning Rods</a></li>
                    <li><a href="#">Surf Fishing Rods N Reels</a></li>
                  </ul>
                </li>
              </ul>
            </li>
		<li><a href="#">Javascript</a>
			<i class='bx bxs-chevron-down js-arrow arrow'></i>
	  <ul class="js-sub-menu sub-menu">
		<li><a href="#">Dynamic Clock</a></li>
		<li><a href="#">Form Validation</a></li>
		<li><a href="#">Card Slider</a></li>
		<li><a href="#">Complete Website</a></li>
	  </ul>
	</li>
		<li><a href="#">Pros Section</a></li>
		<li><a href="#">Pros Q&amp;A</a></li>
        </ul>
      </div>
      <div class="search-box">
        <i class='bx bx-search'></i>
        <div class="input-box">
          <input type="text" placeholder="Search...">
        </div>
      </div>
    </div>
  </nav>
</body>
</html>

CSS:

Code:

/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 70px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 99;
}
nav .navbar{
  height: 100%;
  max-width: 1250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  /* background: red; */
  padding: 0 50px;
}
.navbar .logo a{
  font-size: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
nav .navbar .nav-links{
  line-height: 70px;
  height: 100%;
}
nav .navbar .links{
  display: flex;
}
nav .navbar .links li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}
nav .navbar .links li a{
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(180deg);
  }
 
nav .navbar .links li .arrow{
  /* background: red; */
  height: 100%;
  width: 22px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: #fff;
  transition: all 0.3s ease;
}
nav .navbar .links li .sub-menu{
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 40px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu{
  display: block;
}
.navbar .links li .sub-menu li{
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.navbar .links li .sub-menu a{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.navbar .links li .sub-menu .more-arrow{
  line-height: 40px;
}
.navbar .links li .htmlCss-more-sub-menu{
  /* line-height: 40px; */
}
.navbar .links li .sub-menu .more-sub-menu{
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
.links li .sub-menu .more:hover .more-sub-menu{
  display: block;
}
.navbar .search-box{
  position: relative;
   height: 40px;
  width: 40px;
}
.navbar .search-box i{
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.navbar .search-box .input-box{
  position: absolute;
  right: calc(100% - 40px);
  top: 80px;
  height: 60px;
  width: 300px;
  background: #3E8DA8;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}
.navbar.showInput .search-box .input-box{
  top: 65px;
  opacity: 1;
  pointer-events: auto;
  background: #3E8DA8;
}
.search-box .input-box::before{
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #3E8DA8;
  right: 10px;
  top: -6px;
  transform: rotate(45deg);
}
.search-box .input-box input{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  height: 35px;
  width: 280px;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  border: none;
}
.navbar .nav-links .sidebar-logo{
  display: none;
}
.navbar .bx-menu{
  display: none;
}
@media (max-width:920px) {
  nav .navbar{
    max-width: 100%;
    padding: 0 25px;
  }
 
  nav .navbar .logo a{
    font-size: 27px;
  }
  nav .navbar .links li{
    padding: 0 10px;
    white-space: nowrap;
  }
  nav .navbar .links li a{
    font-size: 15px;
  }
}
@media (max-width:800px){
  nav{
    /* position: relative; */
  }
  .navbar .bx-menu{
    display: block;
  }
  nav .navbar .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 270px;
    width: 100%;
    background:  #3E8DA8;
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }
  .navbar .nav-links .sidebar-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logo .logo-name{
    font-size: 25px;
    color: #fff;
  }
    .sidebar-logo  i,
    .navbar .bx-menu{
      font-size: 25px;
      color: #fff;
    }
  nav .navbar .links{
    display: block;
    margin-top: 20px;
  }
  nav .navbar .links li .arrow{
    line-height: 40px;
  }
nav .navbar .links li{
    display: block;
  }
nav .navbar .links li .sub-menu{
  position: relative;
  top: 0;
  box-shadow: none;
  display: none;
}
nav .navbar .links li .sub-menu li{
  border-bottom: none;
 
}
.navbar .links li .sub-menu .more-sub-menu{
  display: none;
  position: relative;
  left: 0;
}
.navbar .links li .sub-menu .more-sub-menu li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(0deg);
  }
  .navbar .links li .sub-menu .more-sub-menu{
    display: none;
  }
  .navbar .links li .sub-menu .more span{
    /* background: red; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }
 
  .links li .sub-menu .more:hover .more-sub-menu{
    display: none;
  }
  nav .navbar .links li:hover .htmlCss-sub-menu,
  nav .navbar .links li:hover .js-sub-menu{
    display: none;
  }
.navbar .nav-links.show1 .links .htmlCss-sub-menu,
  .navbar .nav-links.show3 .links .js-sub-menu,
  .navbar .nav-links.show2 .links .more .more-sub-menu{
      display: block;
    }
    .navbar .nav-links.show1 .links .htmlcss-arrow,
    .navbar .nav-links.show3 .links .js-arrow{
        transform: rotate(180deg);
}
    .navbar .nav-links.show2 .links .more-arrow{
      transform: rotate(90deg);
    }
}
@media (max-width:370px){
  nav .navbar .nav-links{
  max-width: 100%;
} 
}
.navbar .links li:nth-child(4) .htmlCss-sub-menu {
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 40px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
 
.navbar .links li:nth-child(4) .more-sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
 
.links li:nth-child(4):hover .htmlCss-sub-menu {
  display: block;
}
 
.links li:nth-child(4) .more:hover .more-sub-menu {
  display: block;
}

JS:

Code:

// search-box open close js code
let navbar = document.querySelector(".navbar");
let searchBox = document.querySelector(".search-box .bx-search");
// let searchBoxCancel = document.querySelector(".search-box .bx-x");

searchBox.addEventListener("click", ()=>{
  navbar.classList.toggle("showInput");
  if(navbar.classList.contains("showInput")){
    searchBox.classList.replace("bx-search" ,"bx-x");
  }else {
    searchBox.classList.replace("bx-x" ,"bx-search");
  }
});

// sidebar open close js code
let navLinks = document.querySelector(".nav-links");
let menuOpenBtn = document.querySelector(".navbar .bx-menu");
let menuCloseBtn = document.querySelector(".nav-links .bx-x");
menuOpenBtn.onclick = function() {
navLinks.style.left = "0";
}
menuCloseBtn.onclick = function() {
navLinks.style.left = "-100%";
}


// sidebar submenu open close js code
let htmlcssArrow = document.querySelector(".htmlcss-arrow");
htmlcssArrow.onclick = function() {
 navLinks.classList.toggle("show1");
}
let moreArrow = document.querySelector(".more-arrow");
moreArrow.onclick = function() {
 navLinks.classList.toggle("show2");
}
let jsArrow = document.querySelector(".js-arrow");
jsArrow.onclick = function() {
 navLinks.classList.toggle("show3");
}

Hopefully I have provided everything needed if not let me know please.
Thanks
Nootkan

**Finacustech** · 03-14-2023, 10:18 AM

An example of a navbar with 9 links and two dropdowns. You can customize the links and dropdown menus as needed.

HTML:

php
Copy code

Code:

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="home.html" class="nav-link">Home</a>
    </li>
    <li class="nav-item">
      <a href="about.html" class="nav-link">About</a>
    </li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Products</a>
      <div class="dropdown-menu">
        <a href="product1.html" class="dropdown-item">Product 1</a>
        <a href="product2.html" class="dropdown-item">Product 2</a>
      </div>
    </li>
    <li class="nav-item">
      <a href="services.html" class="nav-link">Services</a>
    </li>
    <li class="nav-item">
      <a href="blog.html" class="nav-link">Blog</a>
    </li>
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Resources</a>
      <div class="dropdown-menu">
        <a href="resource1.html" class="dropdown-item">Resource 1</a>
        <a href="resource2.html" class="dropdown-item">Resource 2</a>
      </div>
    </li>
    <li class="nav-item">
      <a href="contact.html" class="nav-link">Contact</a>
    </li>
  </ul>
</nav>

CSS:

css
Copy code

Code:

.navbar {
  background-color: #333;
  height: 50px;
  display: flex;
  justify-content: center;
}

.navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 0 10px;
}

.nav-link {
  color: #fff;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

.dropdown-menu a {
  color: #333;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

In this example, the navbar has a dark background color, and each link has a white text color. The dropdown menus are hidden by default and are displayed when the user hovers over the links that have a dropdown. You can customize the styles as needed to fit the design of your website.

**nootkan** · 03-15-2023, 06:25 PM

Finacustech, thanks for your reply and other option, but I was hoping to get the code I posted to work as that is the navbar I like.

Hopefully someone can see what I did wrong in the code above and point it out to me with what it should be.

**nootkan** · 03-25-2023, 04:39 PM

I was able to solve this with help from another forum. You can remove this post if you wish as no one here other than Finacustech wanted to help.

**Finacustech** · 03-28-2023, 06:39 AM

navbar with dropdown menus that you can use as a starting point:

Code:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
    <li class="dropdown">
      <a href="#">Dropdown 1</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#">Dropdown 2</a>
      <ul>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
      </ul>
    </li>
  </ul>
</nav>

In this example, there are nine links in the navbar. Two of the links have dropdown menus, which are created using nested unordered lists. The first dropdown menu has three links, and the second dropdown menu has three links as well.

To style the navbar and dropdown menus, you can use CSS. Here's an example of some basic styling:

Code:

nav {
  background-color: #333;
  color: #fff;
  font-size: 18px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

nav li {
  position: relative;
  margin-right: 20px;
}

nav li:hover {
  background-color: #555;
}

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

nav .dropdown ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  padding: 10px;
}

nav .dropdown:hover ul {
  display: block;
}

nav .dropdown li {
  margin: 0;
}

nav .dropdown a {
  padding: 5px 0;
}

nav .dropdown:hover a {
  background-color: #555;
}

This CSS applies a dark background color to the navbar and white text. The links are displayed in a row using flexbox, and each link has a margin-right to create some spacing. When a link is hovered over, it changes to a darker color. The dropdown menus are hidden by default and are shown when the parent link is hovered over. The dropdown menu items are styled to have no margin and some padding, and the hover state changes the background color to a darker shade.

Of course, you can customize the CSS to match the design of your website. Hopefully, this example gives you a good starting point for creating a navbar with dropdown menus.