In Firefox responsive mode works fine, but not on Chrome.
* {
margin: 0;
padding: 0;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
top: 0px;
margin: 0 auto;
width: 100%;
background: red;
}
.nav {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 10px 0;
}
.nav li {
margin: -3px;
display: inline-block;
padding: 7px 3px;
border-left: 1px solid silver;
}
#log {
border-right: 1px solid silver;
}
.nav a {
position: relative;
text-decoration: none;
color: silver;
padding: 10px 50px;
font-size: 15px;
}
li:hover {
background: black;
}
/* 800px ============================= */
#media screen and (max-width: 820px) {
body {
background: green;
}
.nav {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 8px 0; /* nav padding */
}
.nav li {
margin: -3px;
display: inline-block;
padding: 2px 3px;
border-left: 1px solid silver;
}
#log {
border-right: 1px solid silver;
}
.nav a {
position: relative;
text-decoration: none;
color: silver;
padding: 5px 40px;
font-size: 14px;
}
}
/* 680px ============================= */
#media screen and (max-width:681px) {
body {
background: royalblue;
}
.nav {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 8px 0; /* nav padding */
}
.nav li {
margin: -3px;
display: inline-block;
padding: 2px 3px;
border-left: 1px solid silver
}
#log {
border-right: 1px solid silver;
}
.nav a {
position: relative;
text-decoration: none;
color: silver;
padding: 5px 30px;
font-size: 14px;
}
}
/* 500px ============================= */
#media screen and (max-width: 590px) {
body {
background: green;
}
.nav {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 8px 0; /* nav padding */
}
.nav li {
margin: -3px;
display: inline-block;
padding: 2px 3px;
border-left: 1px solid silver;
}
#log {
border-right: 1px solid silver;
}
.nav a {
position: relative;
text-decoration: none;
color: silver;
padding: 5px 25px;
font-size: 13px;
}
}
<body>
<header>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li id="log">Login</li>
</ul>
</header>
</body>
Have you tried adding <meta name="viewport" content="width=device-width,initial-scale=1"> into the <head> section of your html code.
Related
I`m trying to make this navbar responsive, and have not found a code that works in this example. When I adjust the width of the screen, I want all the links (not the logo) to be gathered in a hamburger icon, so in portrait mode it will only display the logo and the hamburger icon with the links.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown This example is very close to what I would like, but the content in my navbar is centered with a logo in between the links, and I couldn`t make it work. Also I want the third element (the logo) to be displayed instead of the first link (when the width reaches a certain point). Any help would be greatly appreciated
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
position: fixed;
top: 0;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
<nav>
Home
News
<div><img id="logo" src="src/Logo.jpg" alt=""></div>
Sponsors
<div class="dropdown">
<button class="dropbtn">About us</button>
<div class="dropdown-content">
Our employees
About company
Founder
</div>
</div>
</nav>
I just updated your code with few fixes your logo will always on center and hamburger menu also added. I hope it'll help you out. Thanks
nav {
background: black;
font-family: Times New Roman;
font-size: 14px;
height: 94px;
position: fixed;
width: 100%;
z-index: 1;
}
nav ul {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
height: 94px;
}
nav ul li {
background-color: white;
border: 3px solid #f9c534;
position: relative;
white-space: nowrap;
}
nav ul li:hover {
background-color: #f9c534;
border-color: #fff;
}
nav ul li a {
color: black;
display: block;
margin: 0;
padding: 16px;
text-decoration: none;
}
nav li ul {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
position: absolute;
right: -3px;
top: 50px;
height: auto;
min-width: 150px;
}
nav ul li:hover ul {
display: block;
}
nav #logo {
border-radius: 50%;
background: rgba(0,0,0,0.3);
border: 0;
padding: 0;
width: 100px;
}
#mob-dropChecked {
display: none !important;
}
#media only screen and (max-width: 768px) {
nav {
height: 60px;
}
nav ul {
display: block;
height: 60px;
position: relative;
top: 44px;
}
nav ul li {
display: none;
}
nav #logo {
display: block;
position: absolute;
left: 34%;
top: -29px;
}
#mob-btn {
background-image: url('https://www.shareicon.net/data/512x512/2017/05/09/885755_list_512x512.png');
background-color: transparent;
border: 0;
background-repeat: no-repeat;
background-size: contain;
position: relative;
top: 21px;
height: 40px;
width: 40px;
padding: 13px 20px;
z-index: 2;
}
#mob-dropChecked:checked ~ ul li{
display: block;
}
nav li ul {
position: relative;
right: 0;
top: 16px;
}
}
<nav>
<label for="mob-dropChecked" id="mob-btn"></label>
<input type="checkbox" id="mob-dropChecked" role="button">
<ul>
<li>Home</li>
<li>News</li>
<li id="logo"><img id="logo" src="https://s.w.org/style/images/about/WordPress-logotype-alternative-white.png" alt=""></li>
<li>Sponsors</li>
<li>About us
<ul>
<li>Our employees</li>
<li>About company</li>
<li>Founder</li>
</ul>
</li>
</ul>
</nav>
You can add class to the wrapper div of logo img tag
and add css position: absolute; top: 10px; left: 10px to it for smaller devices using css media queries.
Else (not recommended), you can use two img tags. Hide one on desktop and another on mobile using display: block / display: none.
You could remove the logo from the nav and add a spacer element in its place. Then use absolute position on the logo to get it into place. It's a bit hacky, but would work. https://codepen.io/nickberens360/pen/bZmGWy
header{
position: fixed;
width: 100%;
top: 0;
}
.logo{
display: block;
margin: auto;
position: absolute;
left: 36px;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 99999999;
top: 0;
}
.spacer{
margin: 0 100px;
border: 1px solid red;
}
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
width: 143px;
text-align: center;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
display:block; not applying on max-width: 320px.
Background changes to green, but <li> keeps displaying as float:
.parent-ul li {
display: block;
height: 32px;
width: 15.7%;
/* float: left;*/
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
top: 0px;
margin: 0 auto;
height: 38px;
width: 100%;
padding-top: 2px;
background: red;
}
.parent-ul {
position: relative;
list-style: none;
text-align: center;
margin-left: 16%;
}
.parent-ul li {
height: 32px;
width: 15.7%;
float: left;
}
.parent-ul li{
border-left: 1px solid silver;
}
#prod {
border-right: 1px solid silver;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 12px 38px;
font-size: 15px;
transition: color 1s, font-size .5s;
line-height: 32px;
}
/* 398px ================================= */
#media screen and (max-width: 320px) {
body {
background: green;
}
header {
position: relative;
top: 0px;
margin: 0 auto;
/* height: 38px;*/
width: 100%;
padding-top: 2px;
background: red;
}
.parent-ul {
position: relative;
list-style: none;
text-align: center;
margin-left: 16%;
}
.parent-ul li {
display: block;
height: 32px;
width: 15.7%;
/* float: left;*/
}
.parent-ul li{
border-left: 1px solid silver;
}
#prod {
border-right: 1px solid silver;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 12px 38px;
font-size: 15px;
transition: color 1s, font-size .5s;
line-height: 32px;
}
}
<body>
<header>
<ul class="parent-ul">
<li>Home</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
<li id="prod">About Us</li>
</ul>
</header>
</body>
whenever you use float always clear it. In your case you used float in web but you haven't clear it at 320 media query, clear it using the float: none; clear: both;
I have been working on fixing this but cannot figure out what I am missing. I would like for drop down list to show right below its parent. The list shows but all go to far left and forces the remaining nav items to drop down to another line. i have included a snippet for what is currently looks like and an image of what I want it to look like. Also, I have been trying to figure out how to add down fa fa-caret to nav items with drop down list. Please help!
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
overflow: hidden;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 20px;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
You can achieve this by first making the div.list element into an absolute positioned. The 'display:block' property was pushing all the other content down to the next row because the block element was taking up space.
As you see now the list is no longer pushing the content down but now it is not aligned to the correct nav item. We are also going to add a left:0 so that the div.list is to the left of the parent property.
Now the parent property needs a position of relative so that the left:0 on the child element is being positioned relative to the parent element.
.dropdown:hover .list {
display: block;
position: absolute;
left: 0;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
The problem with your CSS code is, you missed to add position: relative and position: absolute to the .dropdown and .list selectors, which is compulsory to create dropdown. Try this code.
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar li:hover > a {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
position: relative;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background-color: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
--> Please update following code in your existing file
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
}
.list {
opacity: 0;
visibility: hidden;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
top: 20px;
left: 0;
transition: 0.3s ease-in-out;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
opacity: 1;
visibility: visible;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
I dont really no how to explain my question to get my expected result from readers but in soluction i need idea or soluction on How to code my css to output like this picture below in html menu dropdown
this my tried code:
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #555;
}
nav {
float: left;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(menu-icon.png) right;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: right;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
#media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul,
nav:active ul {
display: none;
position: absolute;
padding: 2px;
border: 2px solid #000;
center: 20px;
width: 100%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 2px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
but it output my menu dropdown like this
what should i do big thanks for your time and impact in my soluction
First One:
https://jsfiddle.net/Liamm12/9wkavvd0/1/
Second One:
https://jsfiddle.net/Liamm12/9wkavvd0/2/
Hello There!
Maybe this what you are looking to do
First One
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #555;
}
nav {
float: left;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(menu-icon.png) right;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: right;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
#media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav{
display:flex;
}
nav ul,
nav:active ul {
display: none;
padding: 6px 0px 0px 1px;
margin-left: 15px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 2px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Second One:
a {
color: #4C9CF1;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #555;
}
nav {
float: left;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(menu-icon.png) right;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: right;
}
section {
margin: 80px auto 40px;
max-width: 980px;
position: relative;
padding: 20px
}
/*MEDIA QUERY*/
#media only screen and (max-width: 640px) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav{
display:flex;
}
nav ul,
nav:active ul {
display: none;
padding: 6px 0px 0px 1px;
margin-left: 15px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 4px 0 4px 4px;
}
nav li {
padding: 4px 8px 10px 5px;
margin: 0;
}
nav:hover ul {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
To solve your problem just use the flexbox!
.nav {
display: flex;
padding: 20px
}
nav li {
flex: 1
}
Set the nav to display: flex to show both elements in one line. Remove width of 100% from li and set a flex:1 so it expands to the given space. If you want to set a max-width - just set it with a value of your joice to bind it to a max expand range.
Remove the following
li {
display: inline-block;
float: right;
}
Further infos about the flexbox: https://www.w3schools.com/css/css3_flexbox.asp
I am using HTML lists for dropdown menus in my navbar. The problem I have come across is that when the browser window is small, the dropdown goes off-screen to the left.
I am wondering on the best way to simply center it and stretch the content across 100% at a small screensize.
The problem is the notifications menu (hover over the little envelope).
I've put up some code I ripped from the site which gives you an idea: http://codepen.io/anon/pen/eBeYXd
Hover over the far-right item and the menu will appear, make the browser the size of a mobile screen and see the dropdown move off to the left being cut off.
Code below:
<div class="navigation-main">
<div class="container group">
<ul class="header-navbar">
<!-- notes test -->
<li class="dropdown pull-right alerts-box">
<img src="/templates/default/images/comments/envelope.png" alt=""/> <span class="badge badge-important">1</span> <b class="caret"></b>
<ul class="dropdown-menu">
<li><strong>liamdawe</strong> replied to "test a test test a test test a test test a test te…"</li>
<li class="divider"></li><li>Clear all</li>
<li class="divider"></li>
<li>See all</li>
</ul>
</li>
<!-- notes test -->
</ul>
</div>
</div>
CSS code:
*, *:before, *:after {
box-sizing: inherit;
}
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 10001;
background-color: #222;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.header-navbar>li {
float: left;
}
.header-navbar>.pull-right {
float: right;
}
.header-navbar>li>a {
display: block;
color: #999;
padding: 14px;
}
.header-navbar>.active>a {
color: #FFF;
background-color: #000;
}
.header-navbar>li>a:hover {
color: #FFF;
text-decoration: none;
}
.header-navbar>.header-brand>a {
line-height: 0;
padding: 9px 14px;
margin-left: -14px;
}
.header-search {
padding: 9px 0;
}
.header-search .search-field {
width: auto;
background-color: #333;
border: 1px solid #5c5c5c;
outline: none;
line-height: 19px;
height: 30px;
color: #fff;
margin: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.header .dropdown-menu {
border-top-width: 1px;
}
.header .dropdown:hover .caret {
border-top-color: #FFF;
}
.header-avatar {
padding: 9px 0 9px 14px;
}
.dropdown {
position: relative;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px solid #999;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: ""
}
.dropdown-menu {
position: absolute;
top: 49px;
left: 0;
z-index: 999;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 0;
list-style: none;
text-align: left;
background-color: #222;
border: 1px solid #000;
box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
display: none;
}
.dropdown-menu li {padding: 0 15px 2px;}
.dropdown-menu .divider {
*width: 100%;
height: 1px;
padding: 0px;
margin: 9px 0;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #383838;
}
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
white-space: nowrap;
padding: 2px;
}
.dropdown-menu li>a:hover, .dropdown-menu li>a:focus {
text-decoration: none;
color: #fff;
}
.pull-right .dropdown-menu {
right: 0;
left: auto;
}
.pull-right {
float: right;
}
.nav-avatar {
vertical-align: middle;
background-color: #333;
}
play with min-width: or max-width: and probably allow your text to wrap
something like this
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
min-width: 200px;
white-space: wrap;
padding: 2px;
}