• 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

Hamburger Menu /Mobile styling sudddenly not working

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 › Hamburger Menu /Mobile styling sudddenly not working

This topic is: resolved

Tagged: hamburger menu, menu, mobile, mobile menu

  • This topic has 13 replies, 3 voices, and was last updated 5 years, 3 months ago by tarmadillo.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 6, 2017 at 9:03 pm #212243
    spiezz
    Participant

    Hi all,

    The hamburger menu on this site (www.anniebrook.com) is suddenly not working. I was having some trouble with caching and fonts that were set in rem - I removed the rem settings from css. That's the only changes I made between hamburger and no hamburger.

    Also, reformatting for mobile totally NOT working. Text and images falling off of mobile screen.

    Any suggestions totally appreciated.

    http://www.anniebrook.com
    October 7, 2017 at 6:52 am #212250
    Victor Font
    Moderator

    We can't help if you keep your site blocked.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    October 7, 2017 at 7:12 am #212253
    spiezz
    Participant

    Sorry! Didn't expect such a quick response!
    Unblocked now.
    🙂
    K

    October 7, 2017 at 7:40 pm #212266
    tarmadillo
    Participant

    are you sure you didn't change the following section in functions.php?

    $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
    	wp_enqueue_script( 'altitude-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menus' . $suffix . '.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
    	wp_localize_script(
    		'altitude-responsive-menu',
    		'genesis_responsive_menu',
    		altitude_responsive_menu_settings()
    	);;
    

    Same happened to me when I changed 'altitude-responsive-menu' under wp_enqueue_script but not wp_localize_script.


    https://armadillowebdesign.com

    October 7, 2017 at 7:57 pm #212267
    tarmadillo
    Participant

    also I ran your css through csslint and there are parsing errors that may be causing you problems http://csslint.net

    Unexpected token '}' at line 1311, col 1.
    Expected LBRACE at line 2120, col 57. (missing a /* on multi-line comment)
    Unexpected token '760px' at line 2120, col 57.
    Expected IDENT at line 2121, col 29.

    edit* the missing /* on line 2120 of your css is the source of your responsive menu problems as well


    https://armadillowebdesign.com

    October 8, 2017 at 10:07 am #212284
    spiezz
    Participant

    Thanks for that csslint tool. Awesome.

    Nope, didn't alter the php functions file on this at all. Went in and compared to out of the box theme to see if it got degraded.
    It didn't.

    Still a mystery as to why my menu's not responsive.

    October 8, 2017 at 12:33 pm #212289
    tarmadillo
    Participant

    its the missing /* on that multi line comment causing your menu problems. Its causing all of your media queries to get messed up. when I fix it in my browser the responsive menu starts working again.


    https://armadillowebdesign.com

    October 8, 2017 at 12:45 pm #212290
    spiezz
    Participant

    Tarmadi, I cleared that (on line 2120) hours ago. Still have the issue.
    I took that css and moved it to the correct area for @media queries.
    :/

    October 8, 2017 at 1:05 pm #212292
    tarmadillo
    Participant

    it's working on my end. did you clear your browser cache?


    https://armadillowebdesign.com

    October 8, 2017 at 1:53 pm #212294
    spiezz
    Participant

    Awesome. Thanks so much for your help!

    October 9, 2017 at 9:06 am #212326
    spiezz
    Participant

    Just reloaded and checked. Responsive menu still not working on iPhone5. Simulator in chrome dev tools shows an even more messed up version of what I see on my device.

    Any other ideas?

    Thanks so much!

    October 9, 2017 at 1:52 pm #212343
    tarmadillo
    Participant

    if you haven't deleted the cache on your phone that's the problem there.

    as for what you are seeing in chrome's responsive simulator, I assume it's that the front page 1 section is smashed to one side.

    The reason is that you are using inline css that prevents the section from being responsive since inline css takes top priority.

    instead of this:

    <div><h3 style="padding-top:5%;margin-left:65%;margin-right:5%;text-align:left;color:#000;">Wake up your Inner Genius &<br>Get More Tools for Your Therapy Practice</h3></div>
    
    <div class="optional_fullpage_content" style="margin-left:65%;margin-right:5%;text-align:left;"><p style="color:#000;"> I'm Annie Brook- the founder of the Colorado School of Somatic Studies.   
    We work with therapists and individuals to deepen their understanding of how embodiment can improve and affect the quality of their lives and their clients' lives.	</p>	
    
    <div class="optional_fullpage_content"><p style="color:#000;">I know from 40 years of working as a psychotherapist and teacher, that blending psychology with developmental neuroscience, sensory-motor integration, and play therapies helps people discover and repair the true root of their issues.
    </p>
     </div> 	</div>   </div>

    try this:

    <div class="optional_fullpage_content">
        <h3>Wake up your Inner Genius &<br>Get More Tools for Your Therapy Practice</h3>
    
        <p> I'm Annie Brook- the founder of the Colorado School of Somatic Studies. We work with therapists and individuals to deepen their understanding of how embodiment can improve and affect the quality of their lives and their clients' lives.	</p>	
        
        <p>I know from 40 years of working as a psychotherapist and teacher, that blending psychology with developmental neuroscience, sensory-motor integration, and play therapies helps people discover and repair the true root of their issues.</p>
    </div>

    then in your style.css file add this:

    .optional_fullpage_content {
            padding-top: 5%;
            margin-left: 65%;
            margin-right: 5%;
            text-align: left;
            color: #000;
        }

    and then inside of @media only screen and (max-width: 1023px) in your style.css

    .optional_fullpage_content {
        margin-right: 0px;
        margin-left: 0px;
        color: #fff;
    }

    other than that it looks fine to me.


    https://armadillowebdesign.com

    October 11, 2017 at 9:27 am #212415
    spiezz
    Participant

    The cache issue is definitely something here, but yesterday I looked at a friend's machine and it appears that chrome isn't reading the css here. I'm also not seeing the css changes in devtools on chrome.

    I'm at a loss. It's still appearing over the menu on mobile and the text isn't following that margin-left:65%; or the color:#000 set in the css.

    What am I missing here?
    Thanks!

    October 11, 2017 at 12:16 pm #212423
    tarmadillo
    Participant

    I'm at a loss. I don't think I'm seeing what you are. I'm using an s8 on mobile and the text is not over the mobile menu but there is a black on black font problem where the text overlaps the person. The heading is centered and the text in #optional_fullpage_content is hidden.

    on chrome I do see the changes after I cleared my cache. The p font seems smaller and I do see the changes you made in html and css.

    the h3 text does overlap the menu but only between 1200px and 1024px not mobile.


    https://armadillowebdesign.com

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 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

© 2023 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