Support » Theme: Bouquet » dropdown menu needs to scroll

  • Running WP 4.3 with Bouquet theme. LovingFrugalliving Navmenu item Special Needs/AT Resources has multiple sub-pages that do not show because the list of sub-pages is so long. I need it to scroll, or find another way to make them visible. Did not find this topic already covered. Please help…

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    That is a very long submenu indeed. The last submenu item I see there is “Wheelchairs.” You should be able to scroll your browser to see all the submenu items.

    If you’re having trouble with it, you could try grouping some of your items so the submenu isn’t quite so long.

    My mouse does not have a scroll wheel. When I move the mouse to the browser’s scroll button, the sub-pages list closes immediately, so I cannot access the sub-pages. I am not sure how I could group the sub-pages to make them accessible; if I create more parent pages to link sub-pages to, those extra parent pages will have no content of their own. Ideally, I’d like to have some kind of an arrow on the area that says “Special Needs/AT Resources” so that the remaining sub-pages can be accessed.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi, you can add small arrows to menu items that have submenus by targeting them with the unique menu id such as the following example. I looked in the HTML using my web inspector and for this example chose Architectural Mods. In the li element for that menu item I found this menu id: menu-item-645. I can then construct the following rule to put an arrow to the right of the menu item text.

    Here is a screenshot of where I found the menu item id using the web inspector built into my browser.

    If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

    #menu-item-645 a::after {
        content: "";
        float: right;
        font-family: Genericons;
        font-size: 70%;
    }
    #access ul ul a {
        width: 13em;
    }

    Give this a try as an example to see how things look.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Oops, @kathryn noticed that the character code is missing from the above. Use this corrected CSS instead.

    #menu-item-645 a::after {
        content: "\f501";
        float: right;
        font-family: Genericons;
        font-size: 70%;
    }
    #access ul ul a {
        width: 13em;
    }

    \f501

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘dropdown menu needs to scroll’ is closed to new replies.