CSS Need help with Responsive top nav with dropdown

[henoida]

Hi all!

I'm trying to build a responsive top navigation with dropdown, but need a little help. When resizing the browser I run into problems such as some submenu items (like under "Software") not showing up correctly. I had a "overflow: hidden;" in there, but commented it out, since when I leave it in there, it made things even worse - no dropdown items showing up at all.

http://gershom.com/dev/topnav.html

Any idea what I'm doing wrong? Any help will be much appreciated,

Thanks in advance!

 

[Malcolm]

Hi @henoida,

Welcome to Code Forum! I can understand that the behavior of you navigation drop down isn't as expected while resizing your browser window. I can certainly recognize how important this is to you as you want mobile users to have a good experience while visiting your website. We'd be happy to help!

With that said, it looks like not all dropdown items have the same breakpoints. Would you be able to provide us with the code of your navigation (both HTML & CSS) and of the dropdown. We'd be able to take a better look into the issue.

 

[henoida]

Hi Malcolm,

Thank for the quick answer. This is the html:

<div class="topnav" id="myTopnav">
 
  <a href="#home" class="active">Home</a>
  <a href="#about">Buy</a>
  <div class="dropdown">
    <button class="dropbtn">Products
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">KOGNA - Motion Controller</a>
      <a href="#">KFLOP - Motion Controller</a>
      <a href="#">KStep - Stepper Motor Driver</a>
      <a href="#">SnapAmp - Multi-Purpose Amplifier</a>
      <a href="#">Kanalog - Analog I/O Expansion</a>
      <a href="#">Konnect - Optical I/O Expansion</a>
      <a href="#">KNozz - 3D Printer Extruder Nozzle</a>
    </div>
  </div>
<div class="dropdown">
    <button class="dropbtn">Software
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">KMotion & KMotionCNC</a>
      <a href="#">Download</a>

    </div>
  </div>
<div class="dropdown">
    <button class="dropbtn">Support
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Overview</a>
      <a href="#">Dynomotion Forum</a>
      <a href="#">CNC Forum</a>
      <a href="#">Wiki</a>
      <a href="#">YouTube</a>       
    </div>
  </div>   

  <a href="#about">About</a>
  <a href="#contact">F.A.Q.</a>   
  <a href="#contact">Reviews</a>   
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

And here's the css:

#myTopnav {
    position: absolute;
    top: 100px;
    left: 50px;
}
.topnav {
 /* overflow: hidden; */
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #DB4750;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;   
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* Main body content */

#main {
    position: absolute;
    top: 250px;
    left: 50px;
}

Thanks again!

 

[henoida]

I forgot to mention that in addition there is of course a little Javascript as well:

<script language="javascript">
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

 

[Mutiny]

I think that part of the issue is that the text below the menu is bleeding into the menu. To fix this, you want to add a z-index to the menu, like so:

#myTopnav {
    position: absolute;
    top: 100px;
    left: 50px;
    z-index: 10;
}

This will solve the issue where the items under Software cannot be accessed. The z-index tells the browser to put the menu on top of content that comes after it, whereas typically the browser orders content from top to bottom on the page.

Give that a try and let me know if that works. Once I enable that fix in my browser, it looks like the menu loads properly, but if you're still not seeing what you want there may be more CSS that needs to be adjusted.

 

[henoida]

Thank you so much Mutiny - that did the trick indeed!

Very much appreciated and thanks again!

 

[Krygore]

Glad you got your problem solved! Please be sure to mark the submitted answer

 

[henoida]

Ha, there is one more thing I just discovered... It seems originally this top navigation was not designed to handle clickable buttons when there is a dropdown menu underneath. See what I mean here:
http://gershom.com/dev/index.html works fine as long as "Products" is not clickable. When I make it clickable, there is weird padding:
http://gershom.com/dev/index2.html - in the third menu item.


The html is:

  <div class="dropdown">
    <button class="dropbtn"><a href="products.html">Products </a>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">....

And the css:

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

I know that I somehow have to rewrite the padding section but when I try, it messes everything up even more... Any ideas how I can fix this?

Thank you all in advance for taking the time to look at this!

 

[Krygore]

Well the first issue I'm noticing is that (on mobile) your display is squished down into a 50px width it seems.


This alone made it difficult for me to help you.
You may try implementing a flex box system into your code, it helps to allow different blocks to set where you want and flow around other flex boxes.

Here's a link for the "flex" attribute, look into it, see if it helps if not, you may also need to work on mobile accessibility.

CSS flex property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Here's a link for responsive web designs for all operation systems and machines.

HTML Responsive Web Design

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Hope this helps

 

[henoida]

Oh yes, sorry - I was experimenting with something else. The issue is gone now.

 

[Krygore]

Glad to hear!
Out of curiosity, what did you do to resolve your problem?

 

[henoida]

Well, I meant the issue with the squished 50px width display is gone. The dropdown issue is still there, unfortunately.

 

[Krygore]

You could probably use a form tag with a selection tag within. When you add your input values, define them with an a href to send the end user to the target location. Like this:

<form>
<selection>
<input name="pageName"/><a href="#">pageName</a>
<input name="secondPage"/><a href="#">secondPage</a>
</selection>
</form>

This would create a dropdown menu with clickable links.

 

[henoida]

Thanks for your reply, but my issue is not creating clickable items, but adjusting the padding so that the 1 or 2px black strip under "home" (active class) and the other top menu items (when hovered over) disappears. I've tried changing all possible padding combos, but nothing works... Driving me nuts, especially since I know it must be a small, easy fix. Please see attached screenshot comparison of how it should look like and how it actually does:
http://gershom.com/dev/index2.html

 

[Mutiny]

Try setting line-height: 10px; on your .dropdown elements.

 

[henoida]

That worked. Thanks a lot, Mutiny!