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;
}
Related
I'm using the theme Illdy on a Wordpress site handed to me, and the hoverable dropdown menus on the top navbar are not dropping down in IE or Edge. Firefox and Chrome appear to work.
I've tried adding a variety of these to the additional CSS:
#header .top-header .header-navigation ul li:hover > ul.sub-menu {
visibility: visible;
}
.header-navigation .menu > li:hover > ul {
opacity: 1;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
visibility: visible;
}
.header-navigation .menu-item>li>ul li:hover>a {
opacity: 1;
}
to no avail.
The theme's original CSS pertaining to the top navbar menu is:
#header .top-header .header-logo {
display: block;
font-size: 60px;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
line-height: 75px;
font-weight: 700;
}
#header .top-header .header-logo:hover,
#header .top-header .header-logo:focus {
color: #f1d204;
text-decoration: none;
}
#header .top-header .header-navigation {
float: right;
}
#header .top-header .header-navigation ul {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#header .top-header .header-navigation > ul {
margin-top: 20px;
}
#header .top-header .header-navigation ul li {
margin-left: 40px;
line-height: 40px;
font-weight: 700;
font-size: 14px;
color: #fff;
position: relative;
float: left;
font-family: "Lato";
}
#header .top-header .header-navigation ul li:first-child {
margin-left: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children a {
padding-right: 16px;
position: relative;
margin-bottom: 20px;
display: inline-block;
}
#header .top-header .header-navigation ul li.menu-item-has-children a:after {
content: "\f107";
font-family: "FontAwesome";
font-size: 16px;
position: absolute;
top: 0;
right: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu {
width: 200px;
margin: -5px 0 0;
padding: 0;
position: absolute;
left: 50%;
display: none;
z-index: 10;
background-color: #fff;
-webkit-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
transform: translateX(-50%);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu:before {
display: block;
content: "";
position: absolute;
top: -5px;
left: 50%;
margin-left: -3px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
width: 0;
height: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu {
transform: translateX(0);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu:before {
display: none;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:first-child {
padding-top: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:last-child {
padding-bottom: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a {
width: 100%;
margin: 0;
padding: 0 10px;
line-height: 40px;
font-weight: 400;
font-size: 14px;
color: #8c9597;
text-transform: none;
display: block;
font-family: "Lato";
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:hover > a,
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:focus-within > a {
color: #f1d204;
border-left: 3px solid #f1d204;
background-color: #f8f8f8;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a:after {
display: none;
}
#header .top-header .header-navigation ul li a {
color: #fff;
font-size: 16px;
line-height: 26px;
}
#header .top-header .header-navigation ul li:hover a,
#header .top-header .header-navigation ul li:focus-within a {
color: #ffde00;
text-decoration: none;
}
Add <meta http-equiv="X-UA-Compatible" content="IE=9"/> between the head tags. I personally used this and I had no problems with either IE or Edge. You should also check the syntax which could be read differently and wrong.
The theme we purchased allows you to choose primary and secondary colors, but I want the color to be different when hovering over the main navigation menu. I am not sure how to remove this "child" from the navigation menu only. I tried removing the padding which worked, but then the alignment was off. The items should be blue when hovered, not yellow and then blue. Website is: http://www.stephensengineering.com/stephens33/ .
/* Home Navigation */
.nav-t-holder {
position: relative;
}
.nav-t-holder .nav-header {
display: none;
padding: 12px 20px;
}
.nav-t-holder .nav-t-header button {
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 25px;
border-radius: 5px;
}
.nav-t-holder .nav-t-footer {
display: block;
}
.nav-t-holder .nav-t-footer ul.nav > li {
display: inline-block;
padding: 1.6em 0;
position: relative;
}
.nav-t-holder .nav-t-footer ul.nav > li:hover a,
.nav-t-holder .nav-t-footer ul.nav > li.active a {
color: #0071bd;
background-color: transparent;
}
.nav-t-holder .nav-t-footer ul.nav > li:last-child > a {
border: none;
padding-right: 0;
}
.nav-t-holder .nav-t-footer ul.nav > li:first-child > a
{
padding: 0 1.3em 0 0;
}
.nav-t-holder .nav-t-footer ul.nav > li > a {
padding: 0 1.3em;
display: block;
color: #fff;
text-transform: uppercase;
-webkit-transition: all .3s ease;
transition: all .3s ease;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 600;
border-right: 1px dashed #3f5262;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu {
top: 100%;
left: 0;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu.align-right {
right: 0;
left: auto;
}
.nav-t-holder .nav-t-footer ul.nav > li:hover > ul.sub-menu {
visibility: visible;
opacity: 1;
display:block;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu > li > ul.sub-menu {
top: 0;
left: 100%;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu > li > ul.sub-menu.align-right {
right: 100%;
left: auto;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu > li:hover > ul.sub-menu {
visibility: visible;
opacity: 1;
}
.nav-t-holder .nav-t-footer ul.nav > li ul.sub-menu {
position: absolute;
width: 275px;
opacity: 0;
display:none;
visibility: hidden;
z-index: 99999;
-webkit-transition: all .3s ease;
transition: all .3s ease;
padding-left: 0;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
-moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
}
.nav-t-holder .nav-t-footer ul.nav > li ul.sub-menu li {
display: block;
padding: 0;
background: #fff;
position: relative;
}
.nav-t-holder .nav-t-footer ul.nav > li ul.sub-menu li:last-child a {
border-bottom: 0;
}
.nav-t-holder .nav-t-footer ul.nav > li ul.sub-menu li:last-child a:after {
display: none;
}
nav.main_menu .nav-holder .nav-t-footer ul.nav > li ul.sub-menu li:hover > a {
color: #fff;
background: #51c5e9;
}
.nav-t-holder .nav-t-footer ul.nav > li > ul.sub-menu > li:hover > ul.sub-menu {
visibility: visible;
opacity: 1;
display:block;
}
nav.main_menu .nav-holder ul.nav.ind-menu li.current-menu-item a{
color: #fab90a;
}
nav.main_menu .nav-holder ul.nav.ind-menu li ul.sub-menu li.current-menu-item a,nav.main_menu .nav-holder ul.nav.ind-menu li ul.sub-menu li.current-menu-item a:active {
color: #ffffff!important;
background: #51c5e9;
}
nav.main_menu .nav-holder ul.nav.ind-menu li ul.sub-menu li a {
color: #242424;
font: 600 16px 'Open Sans', sans-serif;
padding: 15px 25px 15px;
border-bottom: 1px solid #e9e9e9;
position: relative;
display: block;
font-weight: 600;
-webkit-transition: all .3s ease;
transition: all .3s ease;
text-transform: capitalize;
text-decoration: none;
}
nav.main_menu .nav-holder ul.nav.ind-menu li ul.sub-menu li:last-child a{
border-bottom: none;
}
.nav-t-holder ul.nav li.has-t-sub-menu > a > button {
display: none;
}
.nav-t-holder .nav-t-header {
display: none;
padding: 12px 0px;
float: right;
}
.touch_top ul .item .media .blue-color a i {
color: #1fa6c8;
}
Right now you have a color(yellow) being assigned to the anchor when the parent li is being hovered, as well as a color(blue) being assigned to the anchor when the anchor itself is being hovered. If you want it to be blue when the parent li is being hovered, change it to this:
.nav-t-holder .nav-t-footer ul.nav > li:hover a, .nav-t-holder .nav-t-footer ul.nav li.active a, .service-info a h4:hover, .nav-holder .nav-footer ul.nav > li:hover a, .nav-holder .nav-footer ul.nav > li.active a, .our-sol-wrapper p span, .single-blog-post .meta-info .content-box .post-links li i, .team .box-img .caption a {
color: #0071bd;
}
You have two conflicting hover events. Hovering over the <li> sets the link to be yellow. Hovering over the <a> directly sets the link to be blue.
// The culprit for the yellow colour
.nav-t-holder .nav-t-footer ul.nav > li:hover a{
color: #ffba00;
}
// For the blue colour
nav.main_menu .nav-holder ul.nav.ind-menu li{
color: #0071bd;
}
You can change the rules of the <a> hover to set the color to be initial, which will effectively stop the hover changing color.
// Use initial to stop it interfering
nav.main_menu .nav-holder ul.nav.ind-menu li{
color: initial;
}
Or failing that, just set both to change it to yellow.
So I have a drop down menu which works just fine as is, however when I attempt to change the font size found under:
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #897768;
/* width: 140px; */
color: #FFF;
display: block;
font:bold 13px Futura, Impact, Helvetica, Arial, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px;
}
from 15px to anything larger, it causes the drop-down menu to disappear - whenever you move the mouse down from the static object to select one of the options.
I'm not sure what I need to alter in order to make the menu work with larger text.
Below is the full CSS code and an example of the HTML:
.Header h1 {text-shadow: 2px 2px #FFFFFF; }
/*----- MBT Drop Down Menu ----*/
#mbtnavbar {
/* background: #897768; */
width: 100%;
color: #897768;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #FFF;
height: auto;
}
#mbtnav {
background: #FFF;
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
/* border-left:1px solid #333;
border-right:1px solid #333; */
height:41px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #4F4F4F;
display: block;
font:bold 15px Crushed, sans-serif;
margin: 0;
padding:9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #FFFFFF;
color: #65a5b2;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: 200px;
width: 200px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 180px;
}
#mbtnav li ul ul {
margin: -35px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #897768;
/* width: 140px; */
color: #FFF;
display: block;
font:bold 13px Futura, Impact, Helvetica, Arial, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #897768;
color: #000000;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
.tabs-inner .widget #mbtnavbar li a {
border-left:none;
}
.tabs-outer .widget, .section {
margin:0;
}
.tabs-inner {
padding: 0px;
}
HTML:
<div id="mbtnavbar">
<ul id="mbtnav">
<li>
Home
</li>
<li>
About
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</li>
</ul>
</div>
I gave this,and its working..Do you want something like this?
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #897768;
/* width: 140px; */
color: #FFF;
display: block;
font:bold 13px Futura, Impact, Helvetica, Arial, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px;
font-size:20px;
}
Bought a template, and been working on this for the last couple of days. On my wits end now. I am trying to change the hover over main nav colour and current chosen page colour, to no avail. Please advice?
Code attached.
nav#main-nav {
z-index: 50;
display: block;
}
nav#main-nav ul {
position: relative;
z-index: 49;
margin: 0;
padding: 0;
list-style: none;
}
nav#main-nav ul li {
position: relative;
z-index: 45;
float: left;
margin: 0 0 0 20px;
padding: 0;
}
nav#main-nav > ul > li > a {
display: block;
font-family: Ubuntu;
font-size: 13px;
line-height: 40px;
color: #ffffff;
text-decoration: uppercase;
position: relative;
z-index: 45;
padding: 20px 0;
letter-spacing: 0.1em;
}
nav#main-nav > ul > li:hover {
z-index: 46;
color: #ffffff;
}
nav#main-nav > ul > li.current-menu-item,
nav#main-nav > ul > li.current-menu-ancestor {
color: #ffffff;
text-decoration: underline;
}
nav#main-nav ul li .sub-menu {
position: absolute;
top: 80px;
left: 0px;
width: 200px;
padding: 0;
display: none;
z-index: 47;
}
nav#main-nav ul .sub-menu li {
float: none;
border-top: 1px solid;
margin: 0;
}
nav#main-nav ul .sub-menu li:first-child {
border-top: none;
}
nav#main-nav ul .sub-menu li a {
color: #ffffff;
font-size: 12px;
line-height: 20px;
padding: 10px 20px;
display: block;
}
nav#main-nav ul .sub-menu li:hover {
background-color: #ffffff;
}
nav#main-nav ul .sub-menu li:hover a {
color: #ffffff;
}
nav#main-nav ul .sub-menu li.current-menu-item > a {
color: #ffffff;
text-decoration: underline;
}
nav#main-nav ul li ul li .sub-menu {
border-top: none;
position: absolute;
top: 0px;
left: 201px;
}
You have
nav#main-nav > ul > li:hover {
z-index: 46;
color: #ffffff;
}
The problem is that the anchor has other styles that override the code above. Then, use
nav#main-nav > ul > li:hover { z-index: 46; }
nav#main-nav > ul > li:hover > a {
color: #ffffff;
}
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 */
}