Jump to content
J.P

Dropdown Menu Responsive

Recommended Posts

Good Morning ,

Ive added a menu bar into my test site and it displays fine on desktop , but experiencing issues on phones and tablets .

The menu bar does responds and fits to the relevant size of the screen, however the drop down button / link stays at the top in the main part of the nav bar instead of dropping into the relevant order of menu links . Please see the issue here http://www.jrstech.co.uk/OrginalHCForum/

Please could anyone provide some help,  i'm sure I've missed something simple !

Thank you for your help in advance .

here is my code for the menu bar :

<div class="topnav" id="myTopnav">

   <a class="nav-link" href="https:\\www.whufc.com">Home</a>
  <a class="nav-link" href="#">Blogs</a>
  <a class="nav-link" href="#">Videos</a>
  <a class="nav-link" href="#">Thames Iron Works</a>
    <div class="nav-dropdown">
   <button class="nav-dropbtn">Dropdown 
      <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>
    </div>
  </div>       
    <a class="nav-link" href="#">Contact Us</a>
  
 
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div> 

 

 

here's my CSS :

.topnav {
  overflow: hidden;
  background: #782b3a;
    box-shadow: inset 1px 0 7px 1px rgba(255,255,255,.5);
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 12px ;
  text-align: center;
  font: normal normal medium 'Trebuchet MS',Verdana,Arial;
 
   border-bottom: 2px solid #1bb1e7;
 }


.active {
   border-bottom: 4px solid #fff;
  color: white;
}

.topnav .icon {
  display: none;
  color: #fff;
}

.nav-dropdown {
  background: #782b3a;
	
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 0px solid #782b3a;
  border-bottom: 0px solid #782b3a;
  padding: 4px 0;
  margin: 0 10px ;
  display: inline-block;
     
    }

.nav-dropdown .nav-dropbtn {
    font-size: 20px;    
    border: none;
    outline: none;
    color: white;
    background-color: #782b3a;
    font-family: inherit;
    margin: 0px;
    transition: 0.95s ease;
 	 background: #782b3a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
border-top: 0px solid #782b3a;
  border-bottom: 0px solid #782b3a;
  padding: 2px 0;
  margin: 0 0px ;

 
 

}

.dropdown-content {
	background-color: #782b3a;
	border-radius: 13px;
    display: none;
    position: absolute;
    background-color: #782b3a;
    min-width: 50px;
     
    z-index: 1;
   padding: 0px;
}

.dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    margin-top: 0 10px ;
    transition: 0.95s ease;
   
    border-bottom: 4px solid #782b3a;
    padding: 2px 0px;
    
}

.nav-link {
  
  background: #782b3a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 0px solid #782b3a;
  border-bottom: 0px solid #782b3a;
  padding: 2px 0;
  margin: 0 10px ;
 display: inline-block;
  
}

.nav-link:hover {
  border-top: 2px solid #782b3a;
  border-bottom: 3px solid #1bb1e7;
  padding: 0px 0; 
  color: #ffffff;
  text-decoration: none;
  transition: 0.45s ease;
}

.2topnav a:hover, .dropdown:hover .dropbtn {
 
 
  height: 0px;
     
  border-bottom: 44px solid #fff;
  padding: 3px 50px; 

}

.dropdown-content a:hover {
    background-color: #fff;
    color: black;
    
  background: #782b3a;
    
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
 border-bottom: 4px solid #1bb1e7;
  padding: 2px 0;
  
}

.nav-dropdown:hover .dropdown-content {
    display: block;
  border-bottom: 2px solid #1bb1e7;
  Padding: 10px 20px;
}

 

Here's my responsive code

@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 {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: left;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

 

Share this post


Link to post
Share on other sites

You need to remove inline-block from div button container and adjust button so its width fills entire width of parent div, with dropdown icon on right, set position: absolute to position: static, remove borders/radius for smaller devices in the media query.

Share this post


Link to post
Share on other sites
2 hours ago, dsonesuk said:

You need to remove inline-block from div button container and adjust button so its width fills entire width of parent div, with dropdown icon on right, set position: absolute to position: static, remove borders/radius for smaller devices in the media query.

Hi , thank you for replying . if i remove "inlineblock" from the div button CSS, it then doesn't display inline in full browser  view.

i have fixed the issue with it displaying when expanding the menu in mobile view , however its still appearing the main navbar in mobile view . Any idea's?

menu bar error.PNG

Share this post


Link to post
Share on other sites

You basically want what styling that is applied to the the anchor menus, is what you want to be applied to the div containing the button. Originally it is display: inline-block; so it aligns with other menu items. When it initially shows the mobile menu, all anchor menu item are hidden with display: none; as define in the media query reaching width 600px and below. When the mobile icon is clicked a class 'responsive' is added to '#myTopnavthe' menu element. The anchor elements use this class to identify and force all anchor links to display: block; that is exactly what you want to happen to the button div container element with class 'nav-dropdown'. You also if you want dropdown arrow icon to right, turn the button into display: block with 100% width, and float right this button icon. You may also want to indent the dropdown text so you can distinguish it from other parent menu items, but that's up to you.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×