• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How Do I Make A CSS Header Mobile Responsive?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: responsive

  • This topic has 3 replies, 4 voices, and was last updated 9 years ago by Debra Scott.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 2, 2013 at 9:18 pm #9102
    Brad Dalton
    Participant

    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?


    2700 Genesis Tutorials

    January 7, 2013 at 7:28 pm #10249
    facupuig
    Member

    Same question here, somebody? Thank you

    June 20, 2013 at 7:08 pm #46989
    myersbr2
    Member

    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.

    June 21, 2013 at 6:32 am #47018
    Debra Scott
    Member

    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
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble