Problems with getting a dropdown to show with a sticky nav bar

HTML & CSS
1

I created a navbar which worked fine.
I’ve added sticky to it and the drop menu has stopped working. It looks like it is behind the backgroud (I can see the top of the dropdown).

Hiw can I get the dropdown to show?

Here is the html code

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">EPC information</a>
  <a href="#news">Prices and Book</a>
  <a href="#contact">Area Covered</a>
   <a href="#about">FAQ's</a>
   <a href="#about">Help</a>
     <div class="dropdown">
    <button class="dropbtn">More
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a> 
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Here is the main css (I think) for the dropdown menu

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

This is the codepen
https://codepen.io/tony-webb/pen/XWLJOOy
2

In .topnav remove overflow:hidden or nothing will show outside but you will need to add display:flow-root to contain your floats.

You also have 2 closing divs missing at the end of topnav which would stop the sticky working.

(It would have been better to use flex and not floats as in the more complete example I gave you a while ago (which included a hamburger for smaller screens).

3

Thanks for your reply.

I needed to change the nav bar as I am not able to provide one of the services that I was offered as self employed(madness).

In fareness, I initially thought that I would adapt the code that you supplied by replacing the dropdowns with anchors. It didn’t work so, I tried writing a new navbar.

What I originally did on the new nav bar was to put the background color in the body but it hid the nav bar. Probems started from this point.

Having read your reply, it reminded me of where I started on this. I c&p my new navbar into the old one and commented out the old one. It worked. All I need to do is tidy up the code as there are 2 nav bar backgrounds (expected).

I’ve learned that my origianl code from when I first tried to adapt your was wrong!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.