[Resolved] Off Canvas Panel Sub Menu Item Formatting

Home Forums Support Off Canvas Panel Sub Menu Item Formatting

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1126937
    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

    #1127284
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1131004
    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.

    #1131193
    Tom
    Lead Developer
    Lead Developer

    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?

    #1153392
    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

    #1153482
    Tom
    Lead Developer
    Lead Developer

    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?

    #1172716
    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/

    #1173057
    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

    #1173132
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1177919
    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!

    #1177925
    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;

    #1178259
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1178588
    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!

    #1179171
    Tom
    Lead Developer
    Lead Developer

    Does this help?:

    @media (max-width: 768px) {
        .slideout-navigation.do-overlay .slideout-menu li {
            margin-bottom: 20px;
        }
    }
    #1179545
    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!

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.