Skip to content

Instantly share code, notes, and snippets.

@WPDevHQ
Created August 1, 2017 05:15
Show Gist options
  • Save WPDevHQ/eb489621ee9b88ecfd3989a6df9c7960 to your computer and use it in GitHub Desktop.
Save WPDevHQ/eb489621ee9b88ecfd3989a6df9c7960 to your computer and use it in GitHub Desktop.
Horizontal aligned menu via the WordPress custom menu widget
/*
* Footem Custom Menu Widget
*/
#footer-menu-widget {
padding: 1% 0;
background-color: transparent;
color: #294e6b;
}
#footer-menu-widget h2.widget-title {
color: #294e6b;
margin: 0.2em 0 0.5em;
}
#footer-menu-widget .widget {
padding-bottom: 0.5em;
}
#footer-menu-widget .widget ul li {
border-top: 0;
}
#footer-menu-widget .widget li {
padding-bottom: 0;
border-bottom: 0;
margin-bottom: 0;
}
#footer-menu-widget .widget li a {
-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0);
color: #294e6b;
}
.footer-menu-inner {
max-width: 1140px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.footer-menu-inner {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
}
.footer-menu-inner .widget {
flex: 1;
padding-left: 4%;
-webkit-align-self: top; /* Safari 7.0+ */
align-self: top;
margin: 0;
z-index: 9;
}
.footer-menu-inner .widget:not(:empty) {
margin-top: 0;
}
.footer-menu-inner .widget:first-child {
padding-left: 0;
}
.footer-menu-inner .widget:last-child {
padding-right: 0;
}
#footer-menu-widget .widget_nav_menu {text-align:center}
#footer-menu-widget .widget_nav_menu .widget-title {
font-size: 32px;
font-size: 2rem;
font-weight: 400;
margin: 0 0 10px;
text-transform: none;
}
#footer-menu-widget .widget_nav_menu .menu > .menu-item {
border-top: 0;
display: inline-block;
font-size: 0.687rem;
font-weight: 600;
letter-spacing: 0.1518em;
text-transform: uppercase;
}
#footer-menu-widget .widget_nav_menu .menu > .menu-item:not(:last-of-type):after {
color: rgba( 0, 0, 0, .8 );
content: "\2022";
position: relative;
right: -8px;
margin-right: 10px;
}
#footer-menu-widget .widget_nav_menu .menu > .menu-item a {
color: #294e6b;
padding: 8px 10px;
-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0);
}
#footer-menu-widget .widget_nav_menu .menu > .menu-item a:focus,
#footer-menu-widget .widget_nav_menu .menu > .menu-item a:hover {
color: #f8f8f8;
background-color: #901116;
border-radius: 4px;
}
#footer-menu-widget .widget_nav_menu .menu .sub-menu {
display: none;
}
#footer-menu-widget .widget_nav_menu .menu > .menu-item:focus > .sub-menu,
#footer-menu-widget .widget_nav_menu .menu > .menu-item:hover > .sub-menu {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment