[Resolved] Off Canvas Panel Sub Menu Item Formatting

[Joe]

I am using an off canvas panel menu. Quite a few of my menu items have sub menus. I’m really struggling to format this section and have it look good.

– The menu items that have sub-menus have a box to the right of the sub-menu item that opens the sub-menu. How can I change this box? An arrow or carrot would look so much better. Also, for some of the menu items the box has dropped to a second line. Can I fix this?

– I adjusted the padding in between menu items (via layout > Off Canvas Panel > Menu Item Height) but it’s only affecting the top-level menu items. All of the sub-menu items when opened have much more space between items.

– Is there a way to change the font size between the main menu items and the sub-menu items to offer the user a bit more differentiation?

My site is on staging so I don’t have a URL I can share yet

[Tom]

Hi there,

1. This sounds like your icons are broken. This can happen when the icons are being served from a different domain than you’re viewing. So if you type in abc.com to see your site, but your site is configured to serve resources from def.com, this will happen. Best to fix that issue, but you can also use SVG icons if you want (Customize > General).

2 + 3: It would definitely help if we could see the site – any chance you can make the staging site viewable or send us login details so we can take a look?

Let me know 🙂

[Joe]

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.

[Tom]

The URLs not matching doesn’t matter if it’s staging vs. live – it’s a browser security thing.

SFTP won’t help, unfortunately. Can you show me a screenshot of the issues, maybe?

[Joe]

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

[Tom]

Hi there,

Try this:

.slideout-navigation .main-nav ul ul li a {
    padding-top: 2px;
    padding-bottom: 2px;
}

.slideout-navigation.main-navigation.do-overlay .main-nav ul ul li a {
    font-size: 13px;
}

Things are loading super fast for me at the moment – maybe you fixed the speed thing?

[Joe]

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/

[Joe]

Hi Tom, me again!! I figured out how to get the code in there, so please disregard my last message.

The nav is overall looking good now, but if you view it on a mobile device the top-level nav items that drop to two lines have a funky space where the carrot icon to the right that opens/closes the menu item lives. Any suggestions on how to get this to look good?

Thanks for your patience with all of my questions!
– Amber

[Tom]

Hi there,

Does this fix it?:

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

Let me know 🙂

[Joe]

Hey Tom!

This did help with the position of the carrots on mobile. However, the line height of the individual menu items now feels exaggerated. It’s hard to tell the menu items that drop to two lines vs. the next line item because the spacing is all equal. Could I maybe define the line height?

And on desktop I just have ONE silly line that looks weird; for the menu item “International Relations (IR) Simulation” the text is all on one line but the carrot drops to the next line.

Thanks so much for the help, these are all of the annoying pesky straggler details now!

[Joe]

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;

[Tom]

Give this a shot:

.slideout-navigation.do-overlay .inside-navigation {
    max-width: 900px;
}

.main-navigation.slideout-navigation .main-nav > ul > li > a {
    line-height: 50px;
}

[Joe]

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!

[Tom]

Does this help?:

@media (max-width: 768px) {
    .slideout-navigation.do-overlay .slideout-menu li {
        margin-bottom: 20px;
    }
}

[Joe]

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!

[Author]

Posts