Community Forums › Forums › Archived Forums › Design Tips and Tricks › How Do I Make A CSS Header Mobile Responsive?
Tagged: responsive
- This topic has 3 replies, 4 voices, and was last updated 9 years ago by
Debra Scott.
-
AuthorPosts
-
January 2, 2013 at 9:18 pm #9102
Brad Dalton
ParticipantI added a header with CSS using the genesis_header hook but its not responsive. http://wpsites.net/
Anyway to make it responsive or do i need to create an image for the header instead?
January 7, 2013 at 7:28 pm #10249facupuig
MemberSame question here, somebody? Thank you
June 20, 2013 at 7:08 pm #46989myersbr2
MemberI'm normally the guy who is usually ASKING questions about these things (in fact, Brad, you're helping me with an issue now!) but on this one I actually found a working solution that I like. Maybe it will help the two of you if you still want the solution.
I made it work on one of my sites (www.stacymakescents.com) by implementing this type of menu code (CSS+jquery) and one image:
Jquery in wp_head():
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
/* prepend menu icon */
$('#nav').append('<div id="mobi-menu"></div>');/* toggle nav */
$("#mobi-menu").on("click", function(){
$("#menu-main-nav").slideToggle();
$(this).toggleClass("active");
});
});
// ]]></script>==============================================================================
And then CSS to style it the way I wan it to look:
/* Responsive Menu */
#menu-icon {
display: none;
visibility: hidden;
}
@media only screen and (max-width: 568px) {
#mobi-menu {
background-color: #879f32;
background: url("http://www.stacymakescents.com/wp-content/themes/decor/images/mobile-menu-icon.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
display: block;
height: 30px;
margin: 0px;
width: 40px;
visibility: visible; }.menu-primary li ul {
margin: 0 0 0 15px;
}.menu-primary li, .menu-secondary li, #header .menu li, ul.sub-menu {
float: none;
}.genesis-nav-menu.menu-secondary a {
float: left;
line-height: 1px;
}.menu-secondary li, ul.sub-menu {
margin: 0 0 0 30px;
}#menu-main-nav {
display: none;
}
}/* Make sure main menu re-appears when scaled up */
@media only screen and (min-width: 569px) {#menu-main-nav {
display: block !important;
}
}You can see how it works to make one or two lines until you get below 568px, then goes to the iPhone looking mobile menu style. Your menu has so much padding, which looks good on desktop, so you might want to adjust that for those folks who would visit on iPad or smaller.
June 21, 2013 at 6:32 am #47018Debra Scott
Membermy two cents: I added the css hook to my header location in media queries and then added the contain property.
@media only screen and (max-width: 1139px) {.header-image .site-title a {
background: url("http://fatcatdesigns.ca/wp-content/themes/fatcatdesigns/images/logo.png") no-repeat center center;
background-size: contain;
}you can see the result on my site.
need help with your business or personal website? Contact me at Fat Cat Designs
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.