Created
January 1, 2013 16:47
-
-
Save GaryJones/4428524 to your computer and use it in GitHub Desktop.
Genesis menus CSS observations.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.genesis-nav-menu { /* .menu-horizontal */ | |
clear: both; /* HM */ | |
font-weight: 700; /* Style */ | |
overflow: hidden; /* HM */ | |
} | |
#header .genesis-nav-menu { /* #header .menu */ | |
float: right; | |
width: auto; | |
} | |
.genesis-nav-menu.menu-primary, /* .menu-primary */ | |
.genesis-nav-menu.menu-secondary { /* .menu-secondary */ | |
border-bottom: 1px solid #ccc; /* Style */ | |
} | |
/* Ineffective for primary and secondary menus (since ".genesis-nav-menu ul" | |
targets the submenus, which is also specifically targetted by ".genesis-nav-menu li ul" | |
which sets it's own width and uses position absolute to take the element out of the | |
flow meaning the float here does nothing), so if only needed for header right, | |
change selector accordingly, and also use .sub-menu instead of ul */ | |
.genesis-nav-menu ul { | |
float: left; | |
width: 100%; | |
} | |
.genesis-nav-menu li { /* .menu-horizontal .menu-item */ | |
display: inline-block; /* HM */ | |
float: left; /* HM */ | |
list-style-type: none; /* HM */ | |
text-align: left; /* Needed? */ | |
} | |
.genesis-nav-menu a { /* .menu-horizontal > .menu-item > a */ | |
display: block; /* HM */ | |
padding: 24px 20px; /* style for HM */ | |
padding: 1.5rem 1.25rem; /* style for HM */ | |
position: relative; /* HM */ | |
text-decoration: none; /* style for HM */ | |
} | |
.genesis-nav-menu a { /* Why currently a separate ruleset? */ | |
color: #1e1e1e; /* style */ | |
} | |
.genesis-nav-menu li a:hover, /* .genesis-nav-menu .menu-item > a:hover */ | |
.genesis-nav-menu li:hover a, /* .genesis-nav-menu .menu-item:hover > a */ | |
.genesis-nav-menu .current-menu-item a { /* .genesis-nav-menu .current-menu-item > a */ | |
color: #ff2a00; /* style */ | |
} | |
/* Note use of child selector in suggestions */ | |
.genesis-nav-menu .highlight-menu-item a { /* .genesis-nav-menu .highlight-menu-item > a */ | |
background-color: #1e1e1e; /* style */ | |
color: #fff; /* style */ | |
margin-left: 20px; /* style */ | |
margin-left: 1.25rem; /* style */ | |
} | |
.genesis-nav-menu .highlight-menu-item a:hover { /* .genesis-nav-menu .highlight-menu-item > a:hover */ | |
background-color: #ff2a00; /* style */ | |
color: #fff; /* style */ | |
} | |
.genesis-nav-menu li li a, /* .genesis-nav-menu .sub-menu a */ | |
.genesis-nav-menu li li a:link, /* If a:visited selector dropped, no need for these pseudo-class selectors */ | |
.genesis-nav-menu li li a:visited { | |
background-color: #fff; /* style */ | |
border: 1px solid #ccc; /* style */ | |
border-top: none; /* style */ | |
color: #1e1e1e; /* Redundant reset, if child selectors are used above */ | |
padding: 20px; /* style */ | |
padding: 1.25rem; /* style */ | |
position: relative; /* Needed for sub-sub-menus, so put into .menu-horizontal .sub-menu a {} */ | |
text-transform: none; /* style */ | |
width: 170px; /* style for HM */ | |
} | |
.genesis-nav-menu li li a:hover { /* .genesis-nav-menu .sub-menu a:hover */ | |
color: #ff2a00; /* style */ | |
} | |
.genesis-nav-menu li ul { /* .menu-horizontal > .menu-item > .sub-menu */ | |
left: -9999px; /* HM */ | |
position: absolute; /* HM */ | |
width: 212px; /* style for HM */ | |
z-index: 99; /* HM */ | |
} | |
.genesis-nav-menu li ul ul { /* .genesis-nav-menu .sub-menu .sub-menu */ | |
margin: -55px 0 0 211px; /* style */ | |
} | |
.genesis-nav-menu li:hover ul ul, /* .menu-horizontal .menu-item:hover .sub-menu .sub-menu */ | |
.genesis-nav-menu li.sfHover ul ul { /* Is superfish really still needed? */ | |
left: -9999px; /* HM */ | |
} | |
.genesis-nav-menu li:hover, /* .menu-horizontal .menu-item:hover */ | |
.genesis-nav-menu li.sfHover { | |
position: static; /* HM */ | |
} | |
/* Why the ul prefix? */ | |
ul.genesis-nav-menu li:hover>ul, /* .menu-horizontal .menu-item:hover > .sub-menu */ | |
ul.genesis-nav-menu li.sfHover ul, | |
#header .genesis-nav-menu li:hover>ul, | |
#header .genesis-nav-menu li.sfHover ul { | |
left: auto; /* HM */ | |
} | |
.genesis-nav-menu li a .sf-sub-indicator, /* .sf-sub-indicator */ | |
.genesis-nav-menu li li a .sf-sub-indicator, | |
.genesis-nav-menu li li li a .sf-sub-indicator { | |
position: absolute; /* style for HM */ | |
text-indent: -9999px; /* style for HM */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have used this menu and added .sf-sub-indicator to my navigation. The strange part is I can view the indicator just in my pc. even its localhost or online server. But no other computer can view it. When I check in other pcs the indicator is not generating but the same online link when I view it in my pc I can see the indicator and its generating. Please help me what is the issue.
Here is the link:
http://www.mailshark.youraxisonline.com/
And this is a screenshot of my pc
http://luminouseyegfx.com/indicator.jpg
Thanks
Umeed