Community Forums › Forums › Archived Forums › Design Tips and Tricks › Hamburger Menu /Mobile styling sudddenly not working
Tagged: hamburger menu, menu, mobile, mobile menu
- This topic has 13 replies, 3 voices, and was last updated 6 years, 1 month ago by
tarmadillo.
-
AuthorPosts
-
October 6, 2017 at 9:03 pm #212243
spiezz
ParticipantHi 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.comOctober 7, 2017 at 6:52 am #212250Victor Font
ModeratorWe 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 #212253spiezz
ParticipantSorry! Didn't expect such a quick response!
Unblocked now.
🙂
KOctober 7, 2017 at 7:40 pm #212266tarmadillo
Participantare 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.
October 7, 2017 at 7:57 pm #212267tarmadillo
Participantalso 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
October 8, 2017 at 10:07 am #212284spiezz
ParticipantThanks 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 #212289tarmadillo
Participantits 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.
October 8, 2017 at 12:45 pm #212290spiezz
ParticipantTarmadi, 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 #212292tarmadillo
ParticipantOctober 8, 2017 at 1:53 pm #212294spiezz
ParticipantAwesome. Thanks so much for your help!
October 9, 2017 at 9:06 am #212326spiezz
ParticipantJust 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 #212343tarmadillo
Participantif 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.
October 11, 2017 at 9:27 am #212415spiezz
ParticipantThe 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 #212423tarmadillo
ParticipantI'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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.