Skip to content

Instantly share code, notes, and snippets.

@GaryJones
Created January 1, 2013 16:47
Show Gist options
  • Save GaryJones/4428524 to your computer and use it in GitHub Desktop.
Save GaryJones/4428524 to your computer and use it in GitHub Desktop.
Genesis menus CSS observations.
.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 */
}
@Umeed
Copy link

Umeed commented May 7, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment