I've been working on this for ages and am trying everything under the sun to try to figure out how to make this navbar horizontal I've previously done it because I copied and pasted this from an old website I've done but it doesn't seem to be working. what am I doing wrong? Ive done floating to the left display inline all that stuff. is it possible that I have something that could be overriding it?
PS. I'm working in Dreamweaver and using some of the bootstrap codings if that helps.
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
/Nav Formatting/
.navbar-nav {
width: 20%;
text-align: center;
}
.navbar-nav > li {
float: right;
display: inline-block;
}
.navbar-nav .nav > lu {
float: right;
display: inline;
}
/Nav Formatting: Hover animation/
.navbar-nav li {
position: relative;
float: left;
margin: 0 20px;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before, li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before, li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight:normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
You have set
.navbar-nav{
width: 20%;
}
How can it expand? Try
.navbar-nav {
width: 100%;
}
/*Nav Formatting*/
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav>li {
float: right;
display: inline-block;
}
.navbar-nav .nav>lu {
float: right;
display: inline;
}
/*Nav Formatting: Hover animation*/
.navbar-nav li {
position: relative;
float: left;
margin: 0 20px;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before,
li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before,
li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
<!--- Navbar --->
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
The outer container .navbar-nav was styled with 20% width. This forced the inner elements to wrap because there was not enough space. A width of 100% is not need here because <nav> is an block element.
If you only have 4 four inner elements, you can give them a width of 25% combined with floating left to stack them next to each other.
Add a clearfix class or overflow:hidden (quick and dirty!) to the outer container to make sure it visally wraps the inner elements.
Please see my updated code snippet for reference:
/*Nav Formatting*/
.navbar-nav {
}
.navbar-nav li {
width: 25%;
float: left;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.navbar-nav .nav > ul {
float: right;
display: inline;
margin: 0;
}
/*Nav Formatting: Hover animation*/
.navbar-nav li {
position: relative;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before,
li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before,
li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
<!--- Navbar --->
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
Your ul is to small. That's why it will press it together. Try
ul.nav.navbar-nav {
width:100%;
}
/*Nav Formatting*/
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav >li {
float: right;
}
.navbar-nav .nav > ul {
float: right;
}
/*Nav Formatting: Hover animation*/
.navbar-nav li {
position: relative;
margin: 0 20px;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before,
li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before,
li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
<!--- Navbar --->
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
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}
I am trying to use this progress step wizard and it works fine but when i try to add the bootstrap css everything messes up and i dont know what is what is wrong.
Here is a js fiddle
https://jsfiddle.net/gy2gqns1/
.step-wizard {
display: inline-block;
position: relative;
width: 100%;
}
.step-wizard .swprogress {
position: absolute;
top: 43px;
left: 12.5%;
width: 75%;
}
.step-wizard .swprogressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid e5e6e6;
width: 0%;
-webkit-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.step-wizard .swprogressbar.swempty {
opacity: 1;
width: 100%;
background-color: #e5e6e6;
}
.step-wizard ul {
position: absolute;
width: 100%;
list-style-type: none;
padding: 0;
left: -2%;
}
.step-wizard li {
display: inline-block;
text-align: center;
width: 24.7%;
}
.step-wizard li .swstep {
position: absolute;
display: inline-block;
line-height: 30px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 4px solid;
border-color: #e5e6e6;
background: #ffffff;
-webkit-transition: background-color 0.6s ease, border-color 0.6s ease;
-o-transition: background-color 0.6s ease, border-color 0.6s ease;
transition: background-color 0.6s ease, border-color 0.6s ease;
}
.step-wizard li .swtitle {
position: absolute;
width: 100%;
left: 20px;
padding-top: 42px;
color: #969c9c;
-webkit-transition: color 0.6s ease;
-o-transition: color 0.6s ease;
transition: color 0.6s ease;
}
.step-wizard li.swactive .swstep {
border-color: #0aa89e;
}
.step-wizard li.swactive .swtitle {
color: black;
}
.step-wizard li.swdone .swstep {
color: white;
background-color: #0aa89e;
border-color: #0aa89e;
}
.step-wizard li > a {
display: block;
width: 100%;
color: black;
position: relative;
text-align: center;
}
.step-wizard li > a:hover .swstep {
border-color: #0aa89eg;
}
.step-wizard li > a:hover .swtitle {
color: black;
}
#media only screen and (max-width: 1200px) {
.step-wizard li {
width: 24%;
}
}
#media only screen and (max-width: 375px) {
.step-wizard li {
width: 22%;
}
}
<body>
<div id="container">
<div class="step-wizard">
<div class="swprogress">
<div class="swprogressbar swempty"></div>
<div id="prog" class="swprogressbar" style="width:33.3%"></div>
</div>
<ul>
<li class="swactive">
<a href="#" id="step1">
<span class="swstep">1</span>
<span class="swtitle">Client Details</span>
</a>
</li>
<li class="swactive">
<a href="#" id="step2">
<span class="swstep">2</span>
<span class="swtitle">Brand Details</span>
</a>
</li>
<li class="">
<a href="#" id="step3">
<span class="swstep">3</span>
<span class="swtitle">Shift Details</span>
</a>
</li>
<li class="">
<a href="#" id="step4">
<span class="swstep">4</span>
<span class="swtitle">Confirmation</span>
</a>
</li>
</ul>
</div>
</div>
Bootstrap adding son styling to ul ad other that override your style.
With little correction to your style you can correct the modify by bs:
.step-wizard {
display: inline-block;
position: relative;
width: 100%;
}
.step-wizard .swprogress {
position: absolute;
top: 43px;
left: 12.5%;
width: 75%;
}
.step-wizard .swprogressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid e5e6e6;
width: 0%;
-webkit-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.step-wizard .swprogressbar.swempty {
opacity: 1;
width: 100%;
background-color: #e5e6e6;
}
.step-wizard ul {
position: absolute;
width: 100%;
list-style-type: none;
padding: 0;
left: -2%;
margin-top:16px; /* Style correction */
}
.step-wizard li {
display: inline-block;
text-align: center;
width: 24.7%;
}
.step-wizard li .swstep {
position: absolute;
display: inline-block;
line-height: 30px;
width: 38px; /* Style correction */
height: 38px; /* Style correction */
border-radius: 50%;
border: 4px solid;
border-color: #e5e6e6;
background: #ffffff;
-webkit-transition: background-color 0.6s ease, border-color 0.6s ease;
-o-transition: background-color 0.6s ease, border-color 0.6s ease;
transition: background-color 0.6s ease, border-color 0.6s ease;
}
.step-wizard li .swtitle {
position: absolute;
width: 100%;
left: 20px;
padding-top: 42px;
color: #969c9c;
-webkit-transition: color 0.6s ease;
-o-transition: color 0.6s ease;
transition: color 0.6s ease;
}
.step-wizard li.swactive .swstep {
border-color: #0aa89e;
}
.step-wizard li.swactive .swtitle {
color: black;
}
.step-wizard li.swdone .swstep {
color: white;
background-color: #0aa89e;
border-color: #0aa89e;
}
.step-wizard li > a {
display: block;
width: 100%;
color: black;
position: relative;
text-align: center;
}
.step-wizard li > a:hover .swstep {
border-color: #0aa89eg;
}
.step-wizard li > a:hover .swtitle {
color: black;
}
#media only screen and (max-width: 1200px) {
.step-wizard li {
width: 24%;
}
}
#media only screen and (max-width: 375px) {
.step-wizard li {
width: 22%;
}
}
I have problem making a ring menu on Top Bar in my own wordpress theme got blocked by Iphone Image when hovering to Ring Menu like screenshot below:
Here CSS style:
.ringMenu {
margin: -3% 0 0 31%;
width: 0;
display: block;
float: left;
/* clear: none; */
}
.navbar-default .ringMenu ul {
list-style: none;
position: relative;
display: block;
}
.ringMenu ul li {
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
display: block;
}
.ringMenu ul li a {
display: block;
width: 160px;
height: 160px;
background: url('http://i.imgur.com/pOvUHA6.png?1') no-repeat scroll right/ 97% 84%;
text-align: center;
line-height: 100px;
border-radius: 50px;
}
.ringMenu ul li.sub-ring {
-webkit-transform: translate;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
display: block;
position: absolute;
top: 30px;
bottom: 0px;
left: 30px;
right: 0px;
opacity: 0;
}
.ringMenu:hover ul .sub-ring{opacity: 1;}
.ringMenu ul li.sub-ring a{
display: block;
width: 110px;
height: 115px;
}
/* top ring */
.ringMenu:hover ul li.top {
display: block;
top: 86px;
left: -213px;
}
/* Bottom ring */
.ringMenu:hover ul li.bottom{
display: block;
top: 175px;
left: -24px;
}
/* Right Ring */
.ringMenu:hover ul li.right {
top: 175px;
left: 83px;
}
/*Right2 Ring */
.ringMenu:hover ul li.right2{
top: 146px;
left: 185px;
}
/*Left Ring */
.ringMenu:hover ul li.left {
top: 146px;
left: -127px;
}
/* Left 2 Ring */
.ringMenu:hover ul li.left2 {
top: 86px;
left: 270px;
}
For further detail please check my theme on this link. So How I can fix it?
Thanks before
Do add z-index:1 in your class ".ringMenu ul li.sub-ring" so class will be like
.ringMenu ul li.sub-ring {
bottom: 0;
display: block;
left: 30px;
opacity: 0;
position: absolute;
right: 0;
top: 30px;
transition: all 1s ease-in-out 0s;
z-index: 1;
}
Hope so it will resolve your issue.
it seems that Chrome and transition have got a problem with position absolute. I'm testing with Chrome 36.0. It works fine with the latest Firefox and the latest IE.
The problem is that I can't view the submenu when I pass the mouse pointer over Categorias item menu.
The code:
<!DOCTYPE html>
<html>
<head lang='es'>
<meta charset='UTF-8'>
<title>Menú Desplegable</title>
<link rel='stylesheet' href='css/styles.css' />
<link rel='stylesheet' href='css/fonts.css' />
</head>
<body>
<header>
<nav>
<ul>
<li><a href='#'><span class='primero'><i class='icon icon-house'></i></span>Inicio</a></li>
<li><a href='#'><span class='segundo'><i class='icon icon-tag'></i></span>Categorías</a>
<ul>
<li><a href='#'>Item#1</a></li>
<li><a href='#'>Item#2</a></li>
<li><a href='#'>Item#3</a></li>
<li><a href='#'>Item#4</a></li>
<li><a href='#'>Item#5</a></li>
</ul>
</li>
<li><a href='#'><span class='tercero'><i class='icon icon-suitcase'></i></span>Servicios</a></li>
<li><a href='#'><span class='cuarto'><i class='icon icon-newspaper'></i></span>Acerca De</a></li>
<li><a href='#'><span class='quinto'><i class='icon icon-mail'></i></span>Contacto</a></li>
</ul>
</nav>
</header>
</body>
</html>
And the CSS code:
* {
padding: 0;
margin: 0 auto;
}
header {
width: 100%;
}
a {
text-decoration: none;
}
nav {
margin: 20px auto;
width: 90%;
max-width: 1000px;
}
nav ul {
list-style: none;
}
nav > ul {
display: table;
overflow: hidden;
width: 100%;
background: black;
position: relative;
}
nav > ul li {
display: table-cell;
}
/*Sub-menu*/
nav > ul > li:hover > ul {
display: block;
height: 100%;
}
nav > ul > li > ul {
display: block;
position: absolute;
background: black;
left: 0;
right: 0;
overflow: hidden;
height: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul li a {
color: white;
display: block;
line-height: 20px;
padding: 20px;
position: relative;
text-align: center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > ul > li a:hover {
background: #5da5a2;
}
nav > ul > li > a span {
background: #174459;
display: block;
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: -55px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > a span .icon {
display: block;
line-height: 60px;
}
nav > ul > li > a:hover > span {
top: 0;
}
/*Colores*/
nav ul li a .primero {
background: #0e5061;
}
nav ul li a .segundo {
background: #5da5a2;
}
nav ul li a .tercero {
background: #f25724;
}
nav ul li a .cuarto {
background: #174459;
}
nav ul li a .quinto {
background: #37a4d9;
}
It seems the problem is in this section:
nav > ul > li > ul {
display: block;
position: absolute;
If I change position to relative, then it appears the submenu when I pass the mouse pointer.
I've been reading about that around internet and it seems a bug solved since 16 or 18 Chrome version, but it doesn't seem at all for this code.
Thanks
This is fix for your css of menu, so now gonna work:
* {
padding: 0;
margin: 0 auto;
}
header {
margin-top:10px;
width: 100%;
overflow: hidden;
height: 150px;
position: relative;
}
a {
text-decoration: none;
}
nav {
top:-20px;
margin: 20px auto;
width: 90%;
max-width: 1000px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
nav ul {
list-style: none;
}
nav > ul {
display: table;
width: 100%;
background: black;
position: relative;
}
nav > ul li {
display: table-cell;
}
/*Sub-menu*/
nav > ul > li:hover > ul {
display: block;
height: 100%;
}
nav > ul > li > ul {
display: block;
position: absolute;
background: black;
left: 0;
right: 0;
overflow: hidden;
height: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul li a {
color: white;
display: block;
line-height: 20px;
padding: 20px;
position: relative;
text-align: center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > ul > li a:hover {
background: #5da5a2;
}
nav > ul > li > a span {
background: #174459;
display: block;
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: -55px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
nav > ul > li > a span .icon {
display: block;
line-height: 60px;
}
nav > ul > li > a:hover > span {
top: 0;
}
/*Colores*/
nav ul li a .primero {
background: #0e5061;
}
nav ul li a .segundo {
background: #5da5a2;
}
nav ul li a .tercero {
background: #f25724;
}
nav ul li a .cuarto {
background: #174459;
}
nav ul li a .quinto {
background: #37a4d9;
}
In my code, I have a drop-down menu. However, the grey box extends to the end of the screen. How can I limit the grey box?
Code from here: http://cssdeck.com/labs/7rsznauv
HTML:
<nav>
<ul class="cf">
<li><a class="dropdown" href="#">Menu Item 2</a>
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after {
content: ' ▶';
}
nav .dropdown:hover:after{
content:'\25bc'
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
/* Clearfix */
.cf:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 90%; // I made it 90% you can make it even narrower
}
Just reduce the width by reducing the percentage or like width: 180px;
just change the width in hnav ul{....}, actually is 100%, change it to 50% or whatever you want