How Do I Make A CSS Header Mobile Responsive?

Community Forums Forums Design Tips and Tricks How Do I Make A CSS Header Mobile Responsive?

This topic is: not resolved

Tagged: 

This topic contains 3 replies, has 4 voices, and was last updated by  Debra Scott 1 year, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #9102

    braddalton
    Participant
    Post count: 10675

    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?


    #10249

    facupuig
    Participant
    Post count: 4

    Same question here, somebody? Thank you

    #46989

    myersbr2
    Participant
    Post count: 21

    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.

    #47018

    Debra Scott
    Moderator
    Post count: 132

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.