[Resolved] Off Canvas Panel Sub Menu Item Formatting

Hi, changing to SVG icons helped. I’m not sure how big of an issue the serving resources thing is since it’s on staging…

The staging site is via GoDaddy and they don’t have an easy way for me to share with you without delegating access to a full GoDaddy user account. What about SFTP access? I can send those credentials.

Hi Tom!

We finally launched the site so I can show you these issues in action. It lives at: http://usgov.statecraftsims.com/

Also, it’s painfully slow after moving from GoDaddy staging to live and I’m trying to figure out how to address this. No one will care about the menu if we can’t load the site. Let me know if you see anything wrong! I’m going to dig around in forums and whatnot so if you have helpful links I’m happy to do some reading here too 🙂

Thanks so much!
– Amber

Hi Tom,

I’m finally getting back to this, I’ve been working on the site speed and NOW it is running really fast! I did have to put edits on hold for a bit, though.

Ok, I tried to drop this code onto the site using the “Code Snippets” plugin but it’s giving me a syntax error. I used the “css code example” for the plugin which adds <?php } ); to the end of the script you sent.

Do you see anything wrong here? https://usgov.statecraftsims.com/screenshot/

Hi again! I tried adding in:

.slideout-navigation.main-navigation.do-overlay .main-nav ul li a {
line-height: 1.2;

And that worked to fix the line hight but ALL the menu items got squished together. I tried adding padding to that like we did for the sub-menu items but it didn’t seem to make a difference…
padding-top: 2px;
padding-bottom: 2px;

Hi Tom,

Thanks so much! Giving the container more space fixed the funky line break on desktop, it’s much better now!

When I update the line heigh I can see the changes on desktop but it doesn’t seem to be making any difference on the mobile experience, which is where I have an issue. On mobile all the line spacing is the same, so I can’t tell when things are 1-line menu items vs. when they’ve dropped to two lines. So for example, the items “International Organizations Sim” and “Model United Nations Simulation” look the same so you don’t know what goes with what, like this…

International
Organizations Sim
Model United
Nations Simulation

Maybe if we could do a smaller line height and more padding between menu items? Open to your suggestion. My goal is just that users can visually group the words and tell the difference between their options here.

Thank you again!

Hi Tom,

That does help by adding more space between items, but I’m still struggling with the actual line height.

If I do inspect in chrome and edit the css via the editor it looks like my dream come true when I add:
line-height: 1.5;
padding-top: 4px;
padding-bottom: 4px;

to the code block you gave me earlier… final result would be:

@media (max-width: 768px) {
.slideout-navigation.main-navigation .main-nav > ul > li > a {
display: flex;
align-items: center;
justify-content: center;
line-height: 1.5;
padding-top: 4px;
padding-bottom: 4px;
}
}

But when I put that into the css editor in WP nothing happens to my live mobile site :/

WHY!??!

I think if I could just get the line height to adjust to 1.5 and do the margin-bottom code you sent me that would work equally well! I also tried adding line-height: 1.5; to that code block without it actually making any difference.

Thank you for your patience here, sorry this is a headache!