Navbar stretch the full width of my page - html

So I'm using this man code http://www.lwis.net/free-css-drop-down-menu/
and I want to have the menu bar stretch the full width of my page.
I'm using the nvidia theme you can find the original code by downloading the zip file on the link above.
Fiddle
http://jsfiddle.net/6Yy4R/
The css code
ul.dropdown {
font: normal 16px "Square", Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
ul.dropdown li {
padding: 7px 0;
background-color: #000;
color: #fff;
line-height: normal;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none; }
ul.dropdown a:hover { color: #005CE6; text-decoration: none; }
ul.dropdown a:active { color: #fff; }
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 12px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
ul.dropdown ul li {
background-color: transparent;
color: #000;
filter: none;
}
ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
background-color: transparent;
}
ul.dropdown ul a:link,
ul.dropdown ul a:visited { color: #fff; }
ul.dropdown ul a:hover { color: #fff; text-decoration: none; }
ul.dropdown ul a:active { color: #fff; }
ul.dropdown *.dir {
padding-right: 12px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown li a {
display: block;
padding: 7px 14px;
}
/* -- Base style override -- */
ul.dropdown li {
padding: 0;
}
/* -- Base style reinitiate: post-override activities -- */
ul.dropdown li.dir {
padding: 7px 20px 7px 14px;
}
ul.dropdown ul li.dir {
padding-right: 15px;
}
/* -- Custom -- */
ul.dropdown ul a {
padding: 4px 5px 4px 14px;
width: 151px; /* Especially for IE */
}
ul.dropdown ul a:hover {
background-color: #005CE6;
}
/* -- Drop-down open -- */
ul.dropdown li:hover > a.dir {
background-color: #2e2e2e;
color: #005CE6;
}
ul.dropdown ul li:hover > a.dir {
background-color: #76b900;
color: #fff;
}

If it's just a case of having the ul be full width you need to clear the floats and apply a bg color
JSFiddle
ul.dropdown {
background-color: #f00;
overflow:hidden; /* quick clearfix */
}

Related

Unstyled navbar in different page

When linking another page for a second navbar shows it's inner code and I'm working with WordPress right now. I have deleted all background colors cause it's harder to understand the CSS code.
Site - http://qweqwe.co.nf/
Linking another page in process:
Here is how navbar is looks like
.site-header {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#edeee8', GradientType=0);
/* IE6-9 */
box-shadow: 0px 0px 10px #999;
border-bottom:solid 5px #686868;
min-width: 960px;
}
.main-navigation {
width: 960px;
margin: 0 auto;
}
.nav-menu {
margin: 0;
padding: 0;
list-style: none;
text-transform: uppercase;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#edeee8', GradientType=0);
/* IE6-9 */
padding: 1.5rem 0 0 482px;
}
.nav-menu > li {
display: inline-block;
margin-right: -4px;
}
.nav-menu li {
background:url(http://qwe.qwe/wp-content/uploads/2015/11/sting.png);
background-position:top right;
background-repeat: no-repeat;
}
.nav-menu li:nth-child(4) {
background:none;
}
.nav-menu li:nth-child(5) {
background:none;
}
.nav-menu ul:nth-child(2) li {
background:url(http://qwe.qwe/wp-content/uploads/2015/11/sting_.png);
background-position:right;
background-repeat: no-repeat;
}
.nav-menu ul:nth-child(2) li:last-child {
background:none
}
.nav-menu a {
display: block;
margin-left: -1px;
padding: 6px 10px 21px 10px;
font-size: 13px;
font-size: 1.3rem;
text-decoration: none;
color: #333;
color: hsl(0, 0%, 21%);
font-family:'HeliosCondC', serif;
font-weight: bold;
}
.nav-menu .current_page_item > a, .nav-menu .current-menu-item > a, .nav-menu .current_page_item > a:hover .nav-menu .sub-menu li a, .nav-menu .current-menu-item > a:hover .nav-menu .sub-menu li a {
background: #686868;
color: white;
border-radius: .5rem .5rem 0 0;
}
.nav-menu .sub-menu {
position: absolute;
left: 0;
margin: 0;
padding:0 0 0 46rem;
width: 100%;
z-index: 1;
}
.nav-menu .sub-menu li {
float: left;
list-style: none;
}
.nav-menu .sub-menu li a:hover {
color:#fff;
}
.nav-menu .sub-menu {
visibility: hidden;
}
.nav-menu .sub-menu a {
font-size: 12px;
margin-bottom: -1px;
color: #fff;
font-weight: 300;
text-transform: none;
list-style: none;
color:#777;
padding: 2rem;
}
.nav-menu .sub-menu .current_page_item > a, .nav-menu .sub-menu .current-menu-item > a, .nav-menu .sub-menu > a:hover, .nav-menu .sub-menu > a:hover {
background: inherit;
color: white;
}
.nav-menu li:hover .sub-menu {
visibility: visible;
}
.nav-menu .current_page_item ul, .nav-menu .current-menu-item ul, .nav-menu ul:hover, .nav-menu ul:hover {
visibility: visible;
}

White space before sub menu, what's wrong?

In this site I have a problem with the submenu that appears in the main navigation, there's a space before the list with the links I don't know why it changed but it appeared fine before, I really don't have an idea of what happened
#navigation {
float: right;
}
#navigation li {
float: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
}
#navigation li strong {
font-weight: 400;
border-right: #e8e8e8 1px solid;
display: block;
padding: 10px 20px;
}
#navigation li a {
padding: 20px 0;
color: #1c1c1c;
text-decoration: none;
display: block;
}
#navigation li:last-child strong {
border-right: none;
}
#navigation li span {
display: block;
color: #a09d9d;
text-transform: lowercase;
letter-spacing: 0.01em;
margin: 5px 0 0 0;
}
#navigation li a:hover span,
#navigation li:hover span,
#navigation li.current-menu-item a span {
color: #1c1c1c;
}
#navigation li li.current-menu-item,
#navigation li li.current_page_item,
#navigation li li:hover {
border-bottom: none;
}
#navigation li li,
#navigation li li:hover {
text-transform: none;
letter-spacing: 0;
border-bottom: #e8e8e8 1px solid;
}
#navigation li li a.sf-with-ul:after {
background: url(../images/arrows2.png) no-repeat;
width: 8px;
height: 8px;
content: '';
position: absolute;
top: 36%;
right: 1em;
}
#navigation li li a {
padding: 15px 20px;
background: #fff;
font-size: 13px;
}
#navigation li li a:hover {
background: #fafafa;
}
#navigation .current-menu-item,
#navigation .current_page_item,
#navigation li:hover {
border-bottom: 4px solid;
}
#navigation li ul {
box-shadow: 0 0 4px rgba(136, 136, 136, 0.6);
}
Seems like the top attribute value is just to high, change it to 93px
#navigation li:hover ul, #navigation li.sfHover ul {
left: 0.01em;
top: 93px;
z-index: 99;
}
Here is an another possible option from Bart:
#navigation li:hover ul, #navigation li.sfHover ul {
left: 0.01em;
top: 100%;
z-index: 99;
}
This seems to work too.
#navigation ul {
position: absolute;
width: 19em;
top: -999em;
margin-top: -39px;
}
In situations like this, i suggest you to use Firebug or Developer Tools integrated on your browser. A very little check using the Inspector tool (found in all developer tools and on Firebug) could have shown you how to resolve this problem very easily.
Or.......
Just remove:
top: -999em;
from:
#navigation ul {
position: absolute;
/* top: -999em; */
width: 19em;
}

Page links style messing up with navigation menu links style. Possible to use different link styles?

I've noticed that the CSS code related to my regular page links had an impact on the navigation items of my webpage navigation menu.
How can I avoid that and keep the navigation menu links styled as they initially were? See http://jsfiddle.net/8MwX7/
Many thanks
Page links:
a:link {
border-bottom: none;
color: #2d7ddf;
text-decoration: none;
}
a:hover {
border-bottom: 1px dotted #2d7ddf;
background: none;
}
a:visited {
background: none;
}
a:active {
background: none;
}
Navigation menu:
nav {
float: right;
margin: 20px auto;
width: 100%;
}
nav ul {
margin-right: -4px;
margin-left: 5px;
text-align: right;
}
nav ul li {
display: inline-block;
margin-right: -4px;
margin-left: 5px;
vertical-align: top;
}
nav a {
padding: 4px 8px;
text-decoration: none;
color: rgba(255,255,255,1);
background: rgba(0,0,0,0.25);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 14px;
font-weight: 400;
}
nav a:hover {
background: rgba(0,0,0,0.35)
}
.activeNav {
background: rgba(0,0,0,0.35)
}
nav ul li ul {
position: absolute;
display: block;
margin-top: 5px;
background: none;
padding-top: 5px
}
nav ul li ul li {
display: block;
float: none;
margin: 0;
padding: 0
}
nav ul li ul li a {
display: block;
text-align: left;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px rgba(0,0,0,0.33);
padding: 10px
}
nav ul li ul li a:hover {
background: rgba(20,150,220,0.5);
color: white;
text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
display: block;
}
.hover span {
color: rgba(255,255,255,0.9);
background: rgba(20,150,220,0.5);
border-radius: 5px;
position: absolute;
display: block;
margin: 5px 0 0 -57px;
padding: 10px;
font-size: 13px;
font-weight: 300;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
cursor: default;
}
I would like to add that using the !important keyword in CSS is generally considered bad practice.
What are the implications of using "!important" in CSS?
http://james.padolsey.com/usability/dont-use-important/
The reason your styles are not working correctly because
a:link, a:hover, a:active, a:visited
are considered more specific than
nav a
If you would like to correct this without using the important tag then modify 'nav a' to the following:
nav a:link, nav a:hover, nav a:active, nav a:visited {
padding: 4px 8px;
text-decoration: none;
color: rgba(255,255,255,1);
background: rgba(0,0,0,0.25);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 14px;
font-weight: 400;
}
The code above makes the following css:
nav a:link, nav a:hover, nav a:active, nav a:visited
more specific than
a:link, a:hover, a:active, a:visited
Here is a link to an updated fiddle:
http://jsfiddle.net/8MwX7/2/
Mark the styles of your menu with !important to prevent it from being overridden.
nav a {
/*other css rules*/
color: rgba(255,255,255,1) !important ;
}
Updated Fiddle

How to make the text align to center in nav bar

I'm testing dropdown nav bar with pure css. Text-align doesn't work it only align the dropdown text, left: 50% and right: 50% yes it makes the text center but the navbar won't cover the width of my page. and please don't use overflow: hidden it will make the dropdown not visible
JSFiddle
I want to make the text like this but because of the overflow I can't see the dropdown
Css:
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
background-color: black;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
/* -- Base drop-down styling -- */
ul.dropdown {
font: normal 16px"Square", Arial, Helvetica, sans-serif;
text-transform: uppercase;
width: 100%;
}
ul.dropdown li {
padding: 7px 0;
background-color: #000;
color: #fff;
line-height: normal;
}
ul.dropdown a:link, ul.dropdown a:visited {
color: #fff;
text-decoration: none;
}
ul.dropdown a:hover {
color: #005CE6;
text-decoration: none;
}
ul.dropdown a:active {
color: #fff;
}
/* -- level mark -- */
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 12px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
ul.dropdown ul li {
background-color: transparent;
color: #000;
filter: none;
}
ul.dropdown ul li.hover, ul.dropdown ul li:hover {
background-color: transparent;
}
ul.dropdown ul a:link, ul.dropdown ul a:visited {
color: #fff;
}
ul.dropdown ul a:hover {
color: #fff;
text-decoration: none;
}
ul.dropdown ul a:active {
color: #fff;
}
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
padding-right: 12px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Base style extension -- */
ul.dropdown li a {
display: block;
padding: 7px 14px;
}
/* -- Base style override -- */
ul.dropdown li {
padding: 0;
}
/* -- Base style reinitiate: post-override activities -- */
ul.dropdown li.dir {
padding: 7px 20px 7px 14px;
}
ul.dropdown ul li.dir {
padding-right: 15px;
}
/* -- Custom -- */
ul.dropdown ul a {
padding: 4px 5px 4px 14px;
width: 151px;
/* Especially for IE */
}
ul.dropdown ul a:hover {
background-color: #005CE6;
}
/* -- Drop-down open -- */
ul.dropdown li:hover > a.dir {
background-color: #2e2e2e;
color: #005CE6;
}
ul.dropdown ul li:hover > a.dir {
background-color: #76b900;
color: #fff;
}
html {
*overflow-x: hidden;
}
body {
padding: 0;
}
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100%;
width: 100%
overflow: hidden;
}
.container {
padding: 50px;
}
.horizontal-centering {
position: relative;
}
.horizontal-centering > * > * {
float: left;
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.horizontal-centering > * > * > * {
float: left;
position: relative;
}
remove float: left; in your ul.dropdown li. Add text-align: center; in your ul.dropdown and display: inline-block; in your ul.dropdown li
Fiddle Demo
ul.dropdown {
position: relative;
z-index: 597;
background-color: black;
text-align: center;
}
ul.dropdown li {
display: inline-block;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}

How to make nav bar stretch the full width of my page

I want to make my navigation bar stretch the full width of my page, but it doesnt want to stretch everytime I use width 100% the navbar just break and lose its form. I'm not using any javascript and i think the problem is on the .horizontal-centering class CMIW
JSFiddle
I'm using pure css nav bar
/* dropdown.css */
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
/* default.css */
ul.dropdown {
font: normal 16px"Square", Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
ul.dropdown li {
padding: 7px 0;
background-color: #000;
color: #fff;
line-height: normal;
}
ul.dropdown a:link, ul.dropdown a:visited {
color: #fff;
text-decoration: none;
}
ul.dropdown a:hover {
color: #005CE6;
text-decoration: none;
}
ul.dropdown a:active {
color: #fff;
}
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 12px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
ul.dropdown ul li {
background-color: transparent;
color: #000;
filter: none;
}
ul.dropdown ul li.hover, ul.dropdown ul li:hover {
background-color: transparent;
}
ul.dropdown ul a:link, ul.dropdown ul a:visited {
color: #fff;
}
ul.dropdown ul a:hover {
color: #fff;
text-decoration: none;
}
ul.dropdown ul a:active {
color: #fff;
}
ul.dropdown *.dir {
padding-right: 12px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* default.advanced.css */
ul.dropdown li a {
display: block;
padding: 7px 14px;
}
ul.dropdown li {
padding: 0;
}
ul.dropdown li.dir {
padding: 7px 20px 7px 14px;
}
ul.dropdown ul li.dir {
padding-right: 15px;
}
ul.dropdown ul a {
padding: 4px 5px 4px 14px;
width: 151px;
}
ul.dropdown ul a:hover {
background-color: #005CE6;
}
ul.dropdown li:hover > a.dir {
background-color: #2e2e2e;
color: #005CE6;
}
ul.dropdown ul li:hover > a.dir {
background-color: #76b900;
color: #fff;
}
html { *overflow-x: hidden; }
body { padding: 0; }
body, html { height: 100%; padding: 0; margin: 0; }
.wrapper { min-height: 100%; min-width: 950px;overflow: hidden; }
.container { padding: 50px; }
.horizontal-centering { position: relative; }
.horizontal-centering > * > * { float: left; width: auto; position: relative; left: 50%; margin: 0; padding: 0; }
.horizontal-centering > * > * > * { float: left; position: relative; right: 50%; }
Instead of using overflow hidden to clear the floats by using a clearfix helper class this made the second level appear.
/* helper class for clearing floats */
.clearfix:after{
display: block;
visibility: hidden;
clear: both;
height: 0;
content:".";
}
.clearfix {
display: inline-block;
}
.clearfix{
display: block;
}
Reworked the dropdown and centering a little
.horizontal-centering {
background: #000000;
position: relative;
}
.horizontal-centering > div > div {
clear: both;
float: left;
width: 100%;
}
.dropdown-horizontal {
float: left;
width: auto;
position: relative;
left: 50%;
margin: 0;
padding: 0;
}
ul.dropdown > li > ul {
visibility: hidden;
position: absolute;
width: auto;
left: 0;
}
ul.dropdown > li:hover > ul {
visibility: visible;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
float: left;
left: 50%;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
}
ul.dropdown > li {
float: left;
position: relative;
right: 50%;
line-height: 1.3em;
}
ul.dropdown li.hover, ul.dropdown li:hover {
cursor: default;
}
ul.dropdown ul li {
float: none;
}
http://fiddle.jshell.net/35JPL/26/
http://fiddle.jshell.net/35JPL/26/show/
Check this fiddle based on yours: http://jsfiddle.net/u67qx/
I added width:100% to some classes and I deleted left:50%; and right:50%;. Looks like this is what you want. You can align text to center.