Issues with Mobile Menu

  • paulpetch

    (@paulpetch)


    2 months ago

    Hey. Tried your official demo and the issue I have cannot be reproduced due to your mobile drop down icon not working.

    My issue is that if you add submenus to the header menu it’s a real mess. It’s very confusing and a poor experience for mobile users to my commercial photography website. Ive added a screen shot.

    Is there a way to convert the mobile menu to a usable one? A small arrow next to main header menu item that drops down? Even larger bolded main headers would be better than the current UI.

    I’m happy to pay you to implement a solution.

    Thanks! -Sky

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter paulpetch

    (@paulpetch)

    2 months ago

    Here is the mobile screen shot of this mess

    http://christchurchphotographer.co.nz/wp-content/uploads/2026/01/IMG_2456.png

    Theme Author Anders Norén

    (@anlino)

    2 months ago

    Hi @paulpetch,

    Unfortunately, the WordPress navigation block doesn’t support adding toggleable sub menus in the overlay menu out of the box. Most WordPress agencies and freelancers should be able to do it for you with a child theme.

    — Anders

    Thread Starter paulpetch

    (@paulpetch)

    2 months ago

    That’s a shame it does not have a child theme out of the box. Would you consider helping?

    What about some CSS to at least BOLD the main navigation ? Maybe a few sizes bigger? Coloured? Surely this is achievable with minimal effort if you know what you are doing? (I don’t!)

    Thanks

    -Sky

    Thread Starter paulpetch

    (@paulpetch)

    1 month, 4 weeks ago

    You are welcome. I recommend you support your themes better.

    /* MOBILE MENU: bold + uppercase ONLY the main headers */
    @media (max-width: 768px) {

    /* 1) Baseline: make menu links normal */
    nav a,
    .mobile-menu a,
    .off-canvas a,
    .slideout-navigation a,
    .wp-block-navigation a {
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    }

    /* 2) Promote any item that HAS a submenu (this should catch "Featured Work") */
    nav li:has(> ul) > a {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    }

    /* 3) Promote specific top-level items by URL / nav a[href="https://wordpress.org/"], nav a[href="https://christchurchphotographer.co.nz/"], nav a[href="/category/christchurch-business-photography-work/"],
    nav a[href="/about-sky-paul-petch/"], nav a[href="/contact-christchurch-photographer/"] {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    }

    }
    /* MOBILE MENU — FINAL POLISH */
    @media (max-width: 768px) {

    /* Promote Featured Work toggle (non-link parent item) */
    nav li:has(> ul) > span,
    nav li:has(> ul) > button,
    nav li:has(> ul) > a:not([href]) {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 1.05em !important;
    }

    /* Slightly increase size of main-level links / nav a[href="https://wordpress.org/"], nav a[href="https://christchurchphotographer.co.nz/"], nav a[href="/category/christchurch-business-photography-work/"],
    nav a[href="/about-sky-paul-petch/"], nav a[href="/contact-christchurch-photographer/"],
    nav a[href*="/resources"] {
    font-size: 1.05em !important;
    }

    }
Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.