I am trying to make a simple vertically aligned menu that has a width of 100%. However, there is some weird padding on the left that prevents the menu from stretching the whole 100%.
HTML
<div class="sidecontent">
<nav class="sidemenu">
<ul>
<li>T-Shirts</li>
<li>Long Sleeve T's</li>
<li>Hoodies</li>
<li>Towels</li>
<li>Design Your Own</li>
</ul>
</nav>
</div>
CSS
div.sidecontent {
width: 100%;
background-color: #E6E6E6;
border-radius: 0 0 10px 10px;
}
nav.sidemenu {
width: 100%;
}
nav.sidemenu ul {
list-style-type: none;
margin: 0;
}
nav.sidemenu ul li {
width: 100%;
border-top: 1px solid #999999;
}
nav.sidemenu ul li:first-child {
border-top: 0;
}
nav.sidemenu ul li:last-child a {
border-radius: 0 0 10px 10px;
}
nav.sidemenu ul li a:link, nav.sidemenu ul li a:visited {
display: block;
font-weight: bold;
font-size: 1em;
text-align: center;
font-family: "Trebuchet MS";
text-decoration: none;
text-transform: uppercase;
color: #4C4C4C;
padding: 28px 0;
}
nav.sidemenu ul li a:hover, nav.sidemenu ul li a:active {
background-color: #CCCCCC;
}
Here is the jsfiddle
Solution
nav.sidemenu ul {
list-style-type: none;
margin: 0;
padding:0;
}
It's the unordered list indent, try adding this to your css:
ul {
list-style:none;
padding-left:0;
}
According to Chrome's HTML inspector, the ul object appears to have sever hidden characteristics:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px; //this is what's bothering you
}
Hence you want to set the padding-left to 0 px for ul objects:
nav.sidemenu ul {
list-style-type: none;
margin: 0;
padding-left: 0; //this is what I added
}
Fixed fiddle: http://jsfiddle.net/awcPd/5/
Related
so I have this navbar in my project, and as it stands at the moment, the text changes color as you hover over it.
jsfiddle of this here
HTML:
<div class = "container">
<div class = "header">
<div class = "header-main">
</div>
<div class = "header-nav">
<ul>
<li><a class = "active" href="#">Home</a></li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS:
* {
padding = 0;
margin = 0;
}
.container {
margin: 0 auto;
width: 940px;
}
.header-main{
border-bottom: 1px solid #dadada;
padding: 20px 0;
}
.header-nav {
padding: 0 0;
}
.header-nav ul {
list-style: none;
}
.header-nav ul li {
float: left;
margin-right: 20px;
}
.header-nav ul li a {
color: #737373;
text-decoration: none;
font-size: 18px;
font-family: 'Novecentosanswide-DemiBold';
text-transform: uppercase;
}
.header-nav ul li a.active {
color: #2ecc71;
}
.header-nav ul li a:hover {
color: #3e3e3e;
}
What I'd like to know is how I can add a box that changes color behind (EDIT: and spans the height of the nav) when you hover over it. The best example I can find of this is Windows 10's site
1. Set links to block elements
2. Add padding to the links (not the list items)
.header-nav ul li a {
color: #737373;
text-decoration: none;
font-size: 18px;
font-family: 'Novecentosanswide-DemiBold';
text-transform: uppercase;
display: block;
padding: 4px 8px;
}
3. Set background-color to the links
.header-nav ul li a.active {
background-color: #2ecc71;
}
.header-nav ul li a:hover {
background-color: #3e3e3e;
}
4. Clear ul
.header-nav ul:after {
clear: both;
content: "";
display: table;
}
5. ???
6. PROFIT
https://jsfiddle.net/BramVanroy/82n0rwb7/9/
Maybe it looks prettier without the margin on the list items? Like so.
(I just noticed that there was an error in your fiddle's CSS. You set margin = 0 to *, but the designator should be a colon not an equal sign, like so: margin: 0.)
.header-nav ul li a {
display:block;
padding:10px;
color: #737373;
text-decoration: none;
font-size: 18px;
font-family: 'Novecentosanswide-DemiBold';
text-transform: uppercase;
}
.header-nav ul li a:hover {
color: #fff;
background:#000;
padding:10px;
}
Eidting these two style classes will do the trick i think. Check it out.
You have to take control of the element size. You can do the trick with
// apply hover to li instead a
.header-nav ul li:hover {
color: #3e3e3e;
background-color: red;
}
// remove the margins for the ul
.header-nav ul {
margin-top: 0px;
margin-bottom: 0px;
}
// implement the margins of the ul on li but as padding instead of margin
.header-nav ul li {
padding-top: 10px;
padding-bottom: 10px;
}
see fiddle example
Few things which you missed:
Clearing the float
Removing margin,bottom from ul which cause unexpected dimensions.
Adding a padding to the link anchors.
CSS::
* {
padding=0;
margin=0;
}
.container {
margin: 0 auto;
width: 940px;
}
.header-main {
border-bottom: 1px solid #dadada;
padding: 20px 0;
}
.header-nav {
padding: 0 0;
}
.header-nav ul {
list-style: none;
margin:0;
padding:0;
}
.header-nav ul li {
float: left;
margin-right: 20px;
}
.header-nav ul li a {
color: #737373;
text-decoration: none;
font-size: 18px;
font-family:'Novecentosanswide-DemiBold';
text-transform: uppercase;
padding:5px 10px;
}
.header-nav ul li a.active {
color: #2ecc71;
background-color:#BFBFBF;
}
.header-nav ul li a:hover {
color: #3e3e3e;
background-color:#BFBFBF;
}
.header-nav ul:after {
clear:both;
content:"";
display:block;
}
Demo: https://jsfiddle.net/lotusgodkk/82n0rwb7/5/
If you visit a website I am working on foramtionMTL on firefox, you will notice that the background of the last element in the header menu "CONTACT US" doesn't span the entire length of the field.
Why is that? and how can I fix it?
HTML:
<div class="headmenus">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>COURSES</li>
<li>VACANCIES</li>
<li>CONTACT US</li>
</ul>
</div>
CSS:
.headmenus {
background: none repeat scroll 0 0 #0086B2;
display: inline;
float: left;
margin: 0;
width: 100%;
}
.headmenus ul {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
display: inline;
float: left;
font-family: 'texgyreadventorregular';
font-size: 14px;
margin: 0;
padding: 0;
width: 100%;
}
.headmenus ul li {
border-right: 1px solid #FFFFFF;
color: #FFFFFF;
display: inline;
float: left;
list-style-type: none;
padding: 0;
text-align: center;
width: 19.895%;
-moz-box-sizing: border-box;
}
.headmenus ul li a {
color: #FFFFFF;
display: inline;
float: left;
font-family: 'texgyreadventorregular';
font-size: 14px;
list-style-type: none;
text-align: center;
width: 100%;
padding:5px 0px;
}
.headmenus ul li:hover {
background: #89ab20;
cursor: pointer;
}
.headmenus ul li.active {
background: #89ab20;
}
headmenus ul li:last-child {
border-right: 0 none;
float: right;
width: 19.9%; !important
}
You are setting in your width value this:
.headmenus ul li {
width:19.895%;
}
Change it to 20% then the five items can be full 100% of the parent:
.headmenus ul li {
width:20%;
}
In addition include box-sizing for all browsers you only include that for -moz- prefix:
.headmenus ul li {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
You have a typo in your css selector for the last element. It says headmenus ul li:last-child { instead of .headmenus ul li:last-child {. If you fix that you should be fine.
.headmenus ul li {
border-right: 1px solid #FFFFFF;
color: #FFFFFF;
display: inline;
float: left;
list-style-type: none;
padding: 0;
text-align: center;
width: 20%;
-moz-box-sizing: border-box;
Try this
I have a hover drop down menu on my website. It displays ok until you hover over. The submenu appears but before you can click on a link, the sub menu vanishes.
Here is the HTML -
<div id="top-nav"><div id="nav">
<nav>
<ul id="menu" style="list-style-type: none;">
<li id="sub">Artists
<ul>
<li>Banks</li>
<li>Lil Silva</li>
<li>Frances and the Lights</li>
<li>Jim-E Stack</li>
</ul>
</li>
<li>Night</li>
<li>Info</li>
</ul>
</nav>
</div>
</div>
And here is the CSS -
#nav {
text-align:center;
list-style: none;
}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
width: 300px;
}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;
}
ul#menu li {
float: left;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
margin-top: 4px;
overflow: hidden;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}
What am I doing wrong? Any help is greatly appreciated!
the problem is the following line of your CSS code:
li#sub ul {
...
margin-top: 4px;
...
}
Just remove this margin-top and your drop down menu will work properly.
In your example there is a 4px margin space between the "Artists"-link and the drop down menu below. And if your cursors leaves the link and enters this "margin area", the browser interprets it as un-hovering the link - and hides the drop down.
Like dalucks said, remove the top margin from your CSS:
li#sub ul {
margin-top:0;
}
Also, reduce the left margin/paddings from the submenu UL and/or LI children. With the original large values (35px) the menu could be hovered over a lot of invisible space.
ul#menu li ul li a {
padding-left:5px;
}
Fiddle: http://jsfiddle.net/LXwTr/
Add Padding: 0 to this
li#sub ul {
padding: 0;
}
http://jsfiddle.net/tdQmE/
I've to put a navigation along to the full width of the browser.
The problem is when click on the first item, along to the full browser width of that item shoild be effected.
This is also for last item
To do that, I've just worked with nav first-child and nav last child. You can see my work at here.
This works well at firefox. But, at chrome, if I zoom in/out the brwoser, the nav items will break.
HTML code:
<body>
<div id="header" class="outer">
<div class="inner">
<h1 class="logo"><img src="images/logo-1.png" width="314" height="158" alt="logo" /></h1>
<div class="nav">
<ul>
<li>home</li>
<li>Nieuws</li>
<li>Praktijk</li>
<li>Behandelingen
<ul>
<li>ouderen</li>
<li>Sport</li>
<li>Algemeen</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="inner">
<div id="content">
<p>Lorem...</p>
</div>
</div>
</body>
CSS code:
body {
background: #fff;
color: #000;
font-family: 'HelveticaNeueLTStd55Roman';
font-size: 14px;
line-height: 1em;
overflow-x: hidden;
}
.outer {
width: 100%;
float: left;
}
.inner {
width: 941px;
margin: 0 auto;
}
#header {
width: 100%;
float: left;
padding: 22px 0 5px 0;
background: url(../images/header-bg.png) repeat-x;
}
h1.logo a {
display: block;
float: left;
}
.nav {
width: auto;
float: left;
margin: 24px 0 0 0;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
.nav ul li a {
min-width: 155px;
text-align: center;
margin: 0 0 8px -21px;
padding: 0 22px 0 32px;
display: block;
font-size: 14px;
color: #cc3840;
line-height: 28px;
font-family: 'HelveticaNeueLTStd75Bold';
text-transform: uppercase;
border-radius: 14px;
background: #fff;
}
.nav ul li.active a, .nav ul li a:hover {
color: #cf383c;
background: none;
}
.nav ul li:first-child a {
margin-left: -900%;
padding-left: 900%;
}
.nav ul li:last-child a {
margin-right: -900%;
padding-right: 900%;
}
.nav ul li:hover a {
color: #cf383c;
background: none;
}
.nav ul ul {
position: absolute;
left: 10px;
right: 0;
display: none;
z-index: 5;
}
.nav ul ul li {
position: relative;
margin: 0;
border: none;
}
.nav ul ul li a, .nav ul li:hover ul li a {
width: 140px;
display: block;
background: #d0353e;
color: #ffe597;
font-size: 18px;
margin: 6px 0 0 0;
padding: 0;
line-height: 26px;
text-align: center;
border-radius: 12px;
}
.nav ul ul li a:hover, .nav ul li:hover li a:hover {
color: #fff;
}
#content {
width: 100%;
float: left;
border-top: 3px solid #fce696;
margin: 20px 0 0 0;
}
#content p {
font-size: 14px;
padding: 10px 0;
}
Can you please tell me how can I fix that for chrome and safari.
Thanks in advance
you need to set width to .nav > ul > li to fix this issue
.nav ul li:first-child, .nav ul li:last-child {
width: 165px;
}
its working fine
http://demo.sumedhasoftech.com/manoj/test/test.html
I have a nav bar with a drop down that is working beautifully. The only thing I am trying to change, is when you hover over the main links, the sub-links/text are on top of eachother. I want them to display horizontally. I have tried all sorts of floats and display inline etc...
Here is a portion of the HTML:
<ul id="top_main_nav" style="float:left;">
<li>Me
<ul>
<li><?php echo ($auth->first_name); ?> <?php if(strlen($auth->last_name) > 6) { echo substr(strtoupper($auth->last_name),0,6) . "..."; }else{ echo ($auth->last_name); } ?></li>
<li>Edit My Profile</li>
<li>Settings</li>
<li>Email Settings</li>
</ul>
</li>
</ul>
Here is the css:
#user_nav_future {
margin: 0 auto;
font: bold 12px Arial,Helvetica, sans-serif;
color: #fff;
}
#user_nav_future ul li {
list-style: none;
float: left;
}
#user_nav_future ul li a {
color: #fff;
padding: 10px;
display: block;
text-decoration: none;
}
#user_nav_future li ul {
display: none;
position: absolute;
top: 35px;
right: 160px;
z-index: 1001;
margin: 0;
padding: 0;
}
#user_nav_future li ul a {
color: #666;
display: inline;
float: left;
}
#user_nav_future ul li a:hover {
color: #FF4800;
}
#user_nav_future ul {
padding:0;
margin:0;
list-style:none;
}
#user_nav_future li {
float:left;
position:relative;
text-align:center;
}
#user_nav_future li ul {
display:none;
position:absolute;
top:34px;
left:0;
}
#user_nav_future li ul li {
width:160px;
}
#user_nav_future li:hover ul,#user_nav li.over ul {
display:block;
}
These changes should do the trick:
#user_nav_future {
margin: 0 auto;
font: bold 12px Arial,Helvetica, sans-serif;
color: #fff;
}
#user_nav_future ul {
/* Reset padding / margins on <ul>. Add back in as necessary. */
padding: 0;
margin: 0;
list-style: none;
}
#user_nav_future ul li {
/* Take <li> out of the picture - everything is now being dictated by nested <a> */
padding: 0;
margin: 0;
display: inline;
}
#user_nav_future ul li a {
/* whatever width you want each link to be. Since you've got 10px of left/right padding, true element width will be 180px */
width: 160px;
padding: 10px;
float: left;
position: relative;
text-decoration: none;
text-align: center;
color: #fff;
}
#user_nav_future li ul a {
color: #666;
}
#user_nav_future ul li a:hover {
color: #FF4800;
}
#user_nav_future li ul {
display: none;
position: absolute;
top: 34px;
left: 0;
}
#user_nav_future li:hover ul,#user_nav li.over ul {
display: block;
}
What they're doing is setting all the block elements that are causing your drop downs to go down to inline elements that float so the menu is horizontal.
I've also transferred positioning control over to the <a> elements. That way the entire area of the link will be clickable, rather than just the text.
If the above doesn't work for you, post some of your HTML or a dev link so we can see what's going on.