How Do I Make A CSS Header Mobile Responsive?

[Brad Dalton]

I 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?

---

Tutorials for StudioPress Themes.

[facupuig]

Same question here, somebody? Thank you

[myersbr2]

I'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.

[Debra Scott]

my 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

[Author]

Posts