Jump to content
kahlin

W3.CSS Dropdown content issues

Recommended Posts

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.

Screen Shot 2017-04-24 at 10.47.56 am.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...