drop down menu truncated in tablet view

  • Hello,
    I’m wondering if you can help me. When in tablet view, if you hover over About Windcroft (the second menu item), what drops down lands a little too far to the left and cuts off part of the first letter of each word.
    Is there a bit of code you could provide that would nudge this over to the right?
    Thanks for your help.
    Jane

    The blog I need help with is: (visible only to logged in users)

  • Hi Jane,

    Try this via Customize > CSS:

    @media screen and (max-width: 800px)
    .main-navigation ul ul {
        max-width: 150px;
    }

    Cheers.

  • Thanks!
    I’m not seeing any difference.
    Also, when I save the code, it gets converted to
    }

    @media screen and (max-width: 800px)
    .main-navigation ul ul {

    }

  • Hi there,

    I am sorry, it should be the following:

    @media screen and (max-width: 800px) {
       .main-navigation ul ul {
           max-width: 150px;
       }
    }

    Hope this helps now.

    Cheers.

  • Still no luck. I don’t think the issue is the width of what drops down; it’s where it lands. There needs to be more space between the words Home and About Windcroft on the horizontal menu to make room for the About Windcroft menu.
    I’d attach a photo here but I don’t see how to do that.
    Hope you can help.
    Thanks.
    Jane

  • Hi there,

    Apologies for the delayed response. Our primary support agent just took a 35-hour flight from Asia to the United States and in his absence, I’m getting caught up with everything. We’re a small team so I appreciate the understanding.

    It’s 4 PM on August 16th here in Vietnam, at the moment, and I will be caught up with all support inquiries no absolutely no later than August 17th at 4 PM. Until then, please bear with me while I tend to your message.

    I want to thank you so much for your patience and understanding. Have an amazing Wednesday and I promise to be with you as soon as humanly possible.

    Cheers,
    Philip Arthur Moore
    CEO, We Cobble

  • Any progress?
    Thanks!
    Jane

  • Hi Jane,

    Extremely sorry for the late reply.

    Please try this:

    @media screen and (min-width: 800px) and (max-width: 1025px) {
        .main-navigation ul {
            text-align: center;
        }
    }

    You can change center to the right if you feel if it’s not good.

    Cheers.

  • That works. Thanks so much!

  • The topic ‘drop down menu truncated in tablet view’ is closed to new replies.