Skip to content

Instantly share code, notes, and snippets.

@mclanecreative
Created May 4, 2013 21:06
Show Gist options
  • Save mclanecreative/5518724 to your computer and use it in GitHub Desktop.
Save mclanecreative/5518724 to your computer and use it in GitHub Desktop.
A base for dropping in responsive elements for a theme, specifically pulling out the standard navigation and dropping in a mobile navigation
/* ======================================================= */
/* Responsive Nav Queries - Swaps normal Nav with a dropdown menu with the #responsive-nav ID */
/* ======================================================= */
#responsive-nav{display: none; float: right;}
#responsive-nav li{clear: both;}
/* @media only screen
and (max-width: 960) {
.navigation ul.sf-menu { display: none; }
#responsive-nav, .chzn-container, .chzn-container div { display: inline-block !important; }
} */
@media only screen and (max-width: 767px) {
.navigation ul.sf-menu { display: none;}
.sf-menu.light li {display:none;}
#section-tophat span.subscribe, #section-tophat span.tagline,
##section-sub-footer span.copyright, #section-sub-footer span.colophon,
{float: none; text-align: center;}
header .navigation{margin-top: 10px;}
#text-2 {display:none;}
.flex-direction-nav{display: none;}
#responsive-nav { display: inline-block !important; width: 100% !important; margin-top: 5px;}
#responsive-nav .chzn-container{width: 100% !important;}
#responsive-nav .chzn-container-single .chzn-single, #responsive-nav .chzn-container-single .chzn-single div {padding: 4px 9px;}
#logo, #tagline p, ul.social, ul.social li{text-align: center; float: none;}
#section-sub-footer span.copyright, #section-sub-footer span.colophon{width: 100%; display: block; clear: both; text-align: center; float: none !important;}
#tagline p{font-size: 24px; line-height: 28px; padding: 0 10 22px 11px;}
ul.social{margin-bottom: 18px !important;}
body #section-sub-footer ul.social{margin-bottom: 0px !important;}
a.button.pagination{width: 90% !important;}
ul.social li{
float: none; display: inline;
-moz-opacity:1.0 !important;
filter: alpha(opacity=100) !important;
opacity:1.0 !important;
}
.flex-control-nav { /* default opacity */
-moz-opacity:0;
filter: alpha(opacity=0);
opacity:0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment