Hamburger Menu /Mobile styling sudddenly not working

[spiezz]

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

[Victor Font]

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?

[spiezz]

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

[tarmadillo]

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

[tarmadillo]

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

[spiezz]

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.

[tarmadillo]

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

[spiezz]

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.
:/

[tarmadillo]

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

---

https://armadillowebdesign.com

[spiezz]

Awesome. Thanks so much for your help!

[spiezz]

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!

[tarmadillo]

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

[spiezz]

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!

[tarmadillo]

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