I've tried suggestions from other answers like, white-space: wrapnow;, nothing's worked so far. My question is, how do I stop the wrapping of text in HTML?
The text on the navbar moves out of position as I minimize my browser, how do I stop this om happening?
Here's a pic of the problem...
My CSS
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
white-space: nowrap;
}
.menu {
margin-top: -8px;
height: 50px;
width: 100%;
position: absolute; right: 0; left: 0;
text-align: left;
background: rgb(63,76,107); /* Old browsers */
background: -moz-linear-gradient(top, rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,76,107,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 1px 3px #000000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a { /* Navigation Bar text */
display: block;
padding: 0 20px;
margin: 15px 0;
line-height: 15px;
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
/* text-shadow: 1px 1px 1px rgba(255,255,255,0.3); */
-webkit-transition: color .4s ease-in-out;
-moz-transition: color .4s ease-in-out;
-o-transition: color .4s ease-in-out;
-ms-transition: color .4s ease-in-out;
transition: color .4s ease-in-out;
}
.menu li:first-child a{ border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { text-decoration: underline; }
.menu li#navbar-logo:hover > a { text-decoration: none; }
.menu ul {
position: absolute;
top: 35px;
left: 0;
opacity: 0;
background: rgba(63,76,107,1);
border-left: 1px solid #393942;
border-bottom: 1px solid #393942;
border-right: 1px solid #393942;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-transition: opacity .75s ease .1s;
-moz-transition: opacity .75s ease .1s;
-o-transition: opacity .75s ease .1s;
-ms-transition: opacity .75s ease .1s;
transition: opacity .75s ease .1s;
}
.menu li:hover > ul {
opacity: 1;
}
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 35px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 10px 0 10px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
border: none;
}
.menu li#navbar-logo,
.menu li#navbar-about,
.menu li#navbar-shop,
.menu li#navbar-contact,
.menu li#navbar-community {
margin-top: 5px;
}
.menu li#navbar-logo {
margin-top: 3px;
}
.menu li#navbar-logo,
.menu li#navbar-about,
.menu li#navbar-shop,
.menu li#navbar-contact,
.menu li#navbar-community {
margin-left: -13px;
margin-right: 5px;
}
.menu li#navbar-about,
.menu li#navbar-shop,
.menu li#navbar-contact,
.menu li#navbar-community {
margin-left: 5px;
margin-right: 5px;
}
#navbar-logo a{
color: #FFC8C8;
text-shadow: 2px 2px 2px rgba(255, 0, 0, 1);
font-size: 50px;
font-family: Intrique Script Personal Use;
}
The HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of Webpage</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<nav class="navbar">
<ul class="menu">
<li id="navbar-logo">Arc Studios</li>
<li id="navbar-about">About Us
<ul>
<li>FAQ's</li>
<li>Our Inception</li>
<li>Locations</li>
</ul>
</li>
<li id="navbar-shop">Store
<ul>
<li>Games</li>
<li>OS's</li>
<li>Other</li>
</ul>
</li>
<li id="navbar-contact">Contact
<ul>
<li>Email</li>
<li>Help Centre</li>
</ul>
</li>
<li id="navbar-community">Community
<ul>
<li>Forums</li>
<li>Events</li>
</ul>
</li>
</ul>
</nav>
</header>
<br></br>
<footer class="footer">
<p><small>© Copyright Arc Innovations 2013, All rights reserved</small></p>
</footer>
</body>
</html>
Maybe try something like this?
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
white-space: nowrap;
overflow: hidden;
}
It would be easier to debug with a http://www.jsfiddle.net example.
I believe white-space: nowrap; should work.
Related
I have a question regarding the text color of my drop down menu. The drop down text color is based off of the main link text color. When I select that link it changes to the current tab color, but also changes the drop down text color. I was wondering how to make the drop down menu color independent from the main tab text color.
Here is the HTML:
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li>Home</li>
<li class="current">Blog
</li>
<li><span>Resources</span>
<ul>
<li>Alcohol</li>
<li>Drugs</li>
<li>Mental Health</li>
<li>Suicide</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
And here is the CSS:
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
Any help would be awesome!
add the following at the end of your css script
ul#nav ul li a:hover{
color:red;
}
Example:
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
ul#nav ul li a:hover{
color:red;
}
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li>Home</li>
<li class="current">Blog
</li>
<li><span>Resources</span>
<ul>
<li>Alcohol</li>
<li>Drugs</li>
<li>Mental Health</li>
<li>Suicide</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
I created the fiddle using your code. While hovering over the drop down menu links, the text color changes to the blue as being used on the current menu tab. In case you don't want to use blue on text hover in the drop down menu and want to go with the white text links, just remove "ul#nav li:hover > a," from your code and it'll do the work.
Now your new CSS code should look like :-
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
In case you want to use some different color while hovering over the drop down text links, you need to use this code separately in the css :-
ul#nav li:hover > a {color:your color name or color code}
If you look at code, when shrinking page, the menu quickly shows up and then slides back down. I'd like it to not show up at all when page shrinks. I can't understand why this is happening.
I assume it may be smth with transitions on #nav instead of input[type="checkbox"]:checked + #nav, but i need to have animation on #nav. I had separate file I played with just for mobile nav and it worked fine. As soon as I started working with media queries things go south.
here's fiddle:
https://jsfiddle.net/reizer/fwzsxrnt/
* {margin:0;padding:0;border:0;list-style:none;font-size:100%;font:inherit;vertical-align:baseline;}
/*RESET*/
body {font: 1em Arial, Helvetica, sans-serif;}
#wrapper {
max-width: 960px;
margin: auto;
}
#nav {
display: block;
max-height: 0em;
overflow: hidden;
transition: max-height 0.5s ease;
-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
}
input[type="checkbox"] {
position: absolute;
margin-top: -100em;
}
input[type="checkbox"]:checked + #nav{
max-height: 20em;
}
label {
background: #9c0;
cursor: pointer;
display: block;
overflow: auto;
padding-left: 1em;
background-color: #9C0;
background: -moz-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99cc00), color-stop(100%,#85b100));
background: -webkit-linear-gradient(top, #99cc00 0%,#85b100 100%);
background: -o-linear-gradient(top, #99cc00 0%,#85b100 100%);
background: -ms-linear-gradient(top, #99cc00 0%,#85b100 100%);
background: linear-gradient(to bottom, #99cc00 0%,#85b100 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc00', endColorstr='#85b100',GradientType=0 );
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #FFF;
font-size: 1.6em;
line-height: 2.6em;
}
label:after {
content: "\f039";
float: right;
background-color: #669900;
padding: 0.2em 0.3em 0.1em;
margin: 0.5em;
font: 1.2em FontAwesome;
border-radius: 0.3em;
-webkit-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0,0,0.3);
-moz-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0,0,0.3);
box-shadow: inset 0em 0.1em 0.2em 0em rgba(0,0,0,0.3);
}
#nav ul li a {
background: #690;
border: solid #90c12f;
border-width: 1px 0 0;
text-decoration: none;
padding: 1em;
display: block;
color: #FFF;
}
#nav ul li a:hover, #nav ul li a:active {
background: #abd728;
}
#media screen and (min-width: 479px) {
.d----onttouchshituntilthispoin----t {
}
label {
display:none;
}
#nav {
display: table;
width: 100%;
max-height: 20em;
overflow: auto;
}
#nav ul {
display: table-row;
}
#nav ul li {
display: table-cell;
}
#nav ul li a {
color: #000;
position: relative;
text-align: center;
text-indent: 20px;
border: solid #000;
border-width: 0 1px 0 0;
line-height: 3.4em;
padding: 0px 20px 0px 0px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
} #nav ul li:last-child a{border:none}
#nav ul li a:hover {
position: relative;
text-indent: 0px;
padding-right: 40px;
}
#nav ul li a:before {
font-family: FontAwesome;
content: "\f078";
position: absolute;
right: 1em;
margin-top: -0.85em;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#nav ul li a:hover:before {
margin-top: 0em;
visibility: visible;
opacity: 1;
}
#nav ul li a ul li {
position: absolute;
background: #FF0;
display: block;
width: 100%;
height: 0em;
visibility: hidden;
opacity: 0;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-webkit-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
-o-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
-moz-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
}
#nav ul li a:hover ul li {
visibility: visible;
opacity: 1;
height: 1em;
-webkit-transition:height 0.5s ease;
transition:height 0.5s ease;
-o-transition:height 0.5s ease;
-moz-transition:height 0.5s ease;
}
<div id="wrapper"><div id="logo"></div><label for="toggle">menu</label>
<input type="checkbox" id="toggle">
<div id="nav">
<ul>
<li>Home<ul><li></li></ul></li>
<li>About<ul><li></li></ul></li>
<li>Products<ul><li></li></ul></li>
<li>FAQ<ul><li></li></ul></li>
<li>Support<ul><li></li></ul></li>
<li>Contact<ul><li></li></ul></li>
</ul>
</div>
test
</div>
Just remove max-height: 20em; from #nav in the media query.
JSFiddle Here
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*RESET*/
body {
font: 1em Arial, Helvetica, sans-serif;
}
#wrapper {
max-width: 960px;
margin: auto;
}
#nav {
display: block;
max-height: 0em;
overflow: hidden;
transition: max-height 0.5s ease;
-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
}
input[type="checkbox"] {
position: absolute;
margin-top: -100em;
}
input[type="checkbox"]:checked + #nav {
max-height: 20em;
}
label {
background: #9c0;
cursor: pointer;
display: block;
overflow: auto;
padding-left: 1em;
background-color: #9C0;
background: -moz-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #99cc00), color-stop(100%, #85b100));
background: -webkit-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: -o-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: -ms-linear-gradient(top, #99cc00 0%, #85b100 100%);
background: linear-gradient(to bottom, #99cc00 0%, #85b100 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#99cc00', endColorstr='#85b100', GradientType=0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #FFF;
font-size: 1.6em;
line-height: 2.6em;
}
label:after {
content: "\f039";
float: right;
background-color: #669900;
padding: 0.2em 0.3em 0.1em;
margin: 0.5em;
font: 1.2em FontAwesome;
border-radius: 0.3em;
-webkit-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0em 0.1em 0.2em 0em rgba(0, 0, 0, 0.3);
box-shadow: inset 0em 0.1em 0.2em 0em rgba(0, 0, 0, 0.3);
}
#nav ul li a {
background: #690;
border: solid #90c12f;
border-width: 1px 0 0;
text-decoration: none;
padding: 1em;
display: block;
color: #FFF;
}
#nav ul li a:hover,
#nav ul li a:active {
background: #abd728;
}
#media screen and (min-width: 479px) {
.d----onttouchshituntilthispoin----t {} label {
display: none;
}
#nav {
display: table;
width: 100%;
overflow: auto;
}
#nav ul {
display: table-row;
}
#nav ul li {
display: table-cell;
}
#nav ul li a {
color: #000;
position: relative;
text-align: center;
text-indent: 20px;
border: solid #000;
border-width: 0 1px 0 0;
line-height: 3.4em;
padding: 0px 20px 0px 0px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#nav ul li:last-child a {
border: none
}
#nav ul li a:hover {
position: relative;
text-indent: 0px;
padding-right: 40px;
}
#nav ul li a:before {
font-family: FontAwesome;
content: "\f078";
position: absolute;
right: 1em;
margin-top: -0.85em;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#nav ul li a:hover:before {
margin-top: 0em;
visibility: visible;
opacity: 1;
}
#nav ul li a ul li {
position: absolute;
background: #FF0;
display: block;
width: 100%;
height: 0em;
visibility: hidden;
opacity: 0;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-webkit-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
-o-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
-moz-transition: height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
}
#nav ul li a:hover ul li {
visibility: visible;
opacity: 1;
height: 1em;
-webkit-transition: height 0.5s ease;
transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
}
<div id="wrapper">
<div id="logo"></div>
<label for="toggle">menu</label>
<input type="checkbox" id="toggle">
<div id="nav">
<ul>
<li>Home<ul><li></li></ul>
</li>
<li>About<ul><li></li></ul>
</li>
<li>Products<ul><li></li></ul>
</li>
<li>FAQ<ul><li></li></ul>
</li>
<li>Support<ul><li></li></ul>
</li>
<li>Contact<ul><li></li></ul>
</li>
</ul>
</div>
test
</div>
I made an image of what I would like to do, sort of, but I cant seem to work it out.
What I would like:
I currently have the nav but it is all in a div, what I want to do, is to divide it, have two different divs and each with different content.
Here's my actual code.
UPDATED:
CSS
#nav
{
position:fixed;
top: 0;
left: 0;
width: 100%;
height:7%;
text-align: center;
padding: .5em 0 1em 0;
z-index: 1;
overflow: hidden;
background-image: -webkit-gradient(
linear,
right top,
left bottom,
color-stop(0, #E1A141),
color-stop(0.43, #DF7266)
);
background-image: -o-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
background-image: -moz-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
background-image: -webkit-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
background-image: -ms-linear-gradient(left bottom, #E1A141 0%, #DF7266 43%);
background-image: linear-gradient(to left bottom, #E1A141 0%, #DF7266 43%);
}
div#a
{
float: left !important;
width: 50%;
display:inline !important;
}
div#b
{
float: left !important;
width: 50%;
}
#nav > ul
{
width:40%;
line-height: 0px;
display: inline-block;
}
#nav > ul:before,
#nav > ul:after
{
content: 'sentido';
width: 300%;
position: absolute;
top: 50%;
margin-top: -2px;
height: 5px;
border-top: solid 1px rgba(192,192,192,0.35);
border-bottom: solid 1px rgba(192,192,192,0.35);
}
#nav > ul:before
{
left: 100%;
margin-left: 1px;
}
#nav > ul:after
{
right: 100%;
margin-right: 1px;
}
#nav > ul > li
{
display: inline-block;
margin: -9px 0.5em 0 0.5em;
border-radius: 0.5em;
padding: 0.85em;
border: solid 1px transparent;
-moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
-webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
-o-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
-ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
}
#nav > ul > li.active
{
border-color: rgba(192,192,192,0.35);
}
#nav > ul > li > a,
#nav > ul > li > span
{
display: block;
color: inherit;
text-decoration: none;
border: 0;
outline: 0;
}
#nav > ul > li > ul
{
display: none;
}
html
<nav id="nav" style="z-index: 9999;" id="navigation">
<div id="a">
<ul>
<li>Inicio</li>
<li>Encuentra</li>
<li>Aventura al Azar</li>
<li>Contacto</li>
</ul>
</div>
<div id="b"> holibebe </div>
</nav>
Any help will be greatly appreciated.
Thanks,
Enrique Bravo.
Set your divs(1 and 2) to be 50% of their parent, in this case the nav element then float the divs and clear them.
BASIC example, going off of your image:
JsFiddle Example
So I am making a drop down-menu for my site and all the looks are fine, but when I hover over it, it appears but when I move my mouse over-top it disappears. When I alter the line height under "ul.menu li > a" it works a little but does not solve my problem. I have tried the "z-index" and nothing.
Heres my css:
ul.menu {
display: inline;
padding: 0px;
margin: 0px;
z-index:999;
}
#black_lay {
display:none;
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
left: 0%; /* makes the div span all the way across the viewing area */
top: 0%; /* makes the div span all the way across the viewing area */
background-color: black;
-moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
-webkit-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 90; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
}
#overlay {
display: none; /* ensures it’s invisible until it’s called */
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
left: 25%; /* positions the div half way horizontally */
top: 25%; /* positions the div half way vertically */
padding: 25px;
border: 2px solid black;
background-color: #ffffff;
width: 50%;
height: 50%;
z-index: 100; /* makes the div the top layer, so it’ll lay on top of the other content */
}
ul.menu li {
position:relative;
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul.menu li.drop {
position: relative;
}
ul.menu > li {
display: inline-block;
}
ul.menu li > a {
line-height: 80px;
padding: 0 1px;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 9000000;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul > li {
list-style: none;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul.menu li:hover a { color: white; }
ul.menu li:hover .dropdownContain { top: 45px; z-index: 500;}
ul.menu li:hover .underline { border-bottom-color: #777; }
ul.menu li:hover .dropOut { opacity: 1; margin-top: 15px; }
Here's my HTML:
<nav style="display:inline">
<ul class="menu">
<li class="drop">
<a>Username</a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Account</li>
<li>Logout</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
This should be your problem:
ul.menu li:hover a { color: white; }
It changes the tab's text color to white, as if it's not there.
I changed it to a different color in fiddle and it's working just fine.
My navagation menu will work in IE8 but works in IE7,9,10. It appears that the #nav_wrap is hiding the the sub menu on hover (if I expand the height of the #nav_wrap i can see the sub menu on hover but only the amount added by the parent container height). I am lost at this point and have no idea how to resolve it since it works in all other IEs, Chrome, Safari and Moz. Any please have an idea???
HTML
<div id="nav_wrap">
<div id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?>
</div>
</div>
CSS
#nav_wrap {
height: 38px;
width: 100%;
margin: -20px auto;
position: absolute;
left: 0;
z-index: 400;
}
/*-- Nav --*/
#nav {
width: 648px;
height: 98%;
z-index: 10;
margin: 0px auto;
font-family: 'Marcellus SC', serif;
font-size: 16px;
letter-spacing: 1px;
font-style:italic;
z-index: 400;
background: #dc0000; /* Old browsers */
background: -moz-linear-gradient(top, #dc0000 0%, #650101 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dc0000), color-stop(100%,#650101)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dc0000 0%,#650101 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dc0000 0%,#650101 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #dc0000 0%,#650101 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc0000', endColorstr='#650101',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #dc0000 0%,#650101 100%); /* W3C */
}
#nav ul,
#nav li,
div.menu ul,
div.menu ul li,
ul.menu, ul.menu li {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
display: block;
padding: 8px 12px;
margin: 1px;
font-size: 15px;
white-space: nowrap;
border-radius: 24px;
color: white;
-webkit-transition: color .3s ease-in-out;
-moz-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
}
#nav ul li a:hover { color: #081b3d; }
#nav ul ul {
position: absolute;
top: -99999px;
left: 0;
opacity: 0; /* Hide sub level */
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
z-index: 1497;
background: #dc0000;
padding: 2px;
border: 1px solid #dc0000;
border-top: none;
box-shadow: #111 0 3px 14px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
#nav ul ul ul {
position: absolute;
top: -99999px;
left: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
border-radius: 6px;
border: 1px solid #dc0000;
}
#nav ul li:hover > ul {
opacity: 1;
position: absolute;
top: 99%;
left: 0;
z-index: 497;
}
#nav ul ul li:hover > ul {
position: absolute;
top: 0;
left: 100%;
opacity: 1;
z-index: 497;
background: #081b3d;
}
the site
For those who ever had this it was fixed by removing
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc0000', endColorstr='#650101',GradientType=0 ) !important; /* IE6-9 */
from all the nav containers. Not sure why.