kahlin Posted April 24, 2017 Share Posted April 24, 2017 I'm having an odd issue with a drop-down menu using w3.css and the w3-bar, w3-dropdown-hover & w3-dropdown-content classes to create a drop-down navigation menu. When the dropdown content contains only one or two links, it works fine, but anything more causes the dropdown content width to extend far further than necessary. I'm sure I'm doing something wrong, but I followed the example given on https://www.w3schools.com/w3css/w3css_navigation.asp and I can't see where I've messed it up. I've attached a screenshot showing the oddly wide dropdown menu, and the live site can be visited at www.aridsmart.com if anyone wants to check out my CSS and HTML. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 24, 2017 Share Posted April 24, 2017 Its because of width 100%; but! mainly float: left .w3-bar-block .w3-bar-item{ width:100%; display:block; padding:8px 16px; text-align:left; border:none; outline:none; white-space:normal } .w3-bar .w3-bar-item{ padding:8px 16px; float:left; width:auto; border:none; outline:none; display:block; } IF you set float to none for class selector '.w3-bar-block .w3-bar-item' .w3-bar-block .w3-bar-item{ width:100%; display:block; padding:8px 16px; text-align:left; border:none; outline:none; white-space:normal; float: none; } It should fix the problem, causing container to shrink to largest menu text content. Link to comment Share on other sites More sharing options...
kahlin Posted April 26, 2017 Author Share Posted April 26, 2017 Thanks dsonesuk, that fixed the problem perfectly. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now