Support » Theme: Sorbet » Menu that is easier to find

  • Resolved IliushaT



    I want to make the default always hidden menu more user-friendly–easier to find for those who are not very well acquainted with a menu symbol used on the web.

    Ideas off the top of my head:
    1. create an icon with “menu” text on it
    2. make the menu opened by default
    3. make the tooltip “Menu” display till user clicks on the icon for the first time

    So which route should I choose? I am new to CSS and PHP. I do know how to create a child theme and to inspect elements.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Hi IIiusha

    The whole point of Sorbet, or at least, why I like the theme is because of the toggles, particularly the menu.

    The best alternative menu that I can think of is if you place a custom menu widget in the sidebar widget area.

    I hope this helps, I have used this with this theme before with a custom menu and it works.



    Ruairi, thank you for replying.

    The alternative menu in the sidebar is not the easiest approach for me because I’ve chosen to have a somewhat multicoloured background image for the main site’s background which sometimes makes the text on the sidebar hardly readable. Besides, I like the appearance of multi-level menu in Sorbet on its own account even without toggling and I am afraid that users that are not savvy enough to know what the three line menu icon does, will not be able find out about this nice looking menu at all.

    Anyway, I think I’ve found a way to show the primary menu by default without losing the toggle functionality.
    In child theme’s style.css I put:

    .panel#menu-toggle-nav {
      display: block;

    This makes the menu always on.
    Also, you can make the menu toggle button to light up by default. Open sorbet/js/menu.js and add the following line before โ€œ// Display/hide sidebarโ€
    I do not know, though, how to modify this code with a child theme.

    Kirk Wight


    Theme Wrangler

    Assuming you want the menu open (with its highlighted menu icon) when a page loads, and then everything to function normally from that point on, you’ll need to add:

    * display: block; at L1179 of style.css (which you’ve got already)
    * add the active class in header.php on L37: class="toggle active"

    Your child theme needs a full copy of header.php (with that change above), then it will override the parent theme. No need to muck with JS files.

    Thank you, Kirk, for showing the proper way to do it.

    If I will have any other ideas or questions on this topic, I will write them in this thread.

    By the way, you look like a very friendly alien in those glasses.

    Kirk Wight


    Theme Wrangler

    Ha, I consider that a great compliment, thank you ๐Ÿ™‚

    Hello. I have integrated this change and it works well. I was wondering, however, how the main menu can be persistent after other menus have been closed. For example, the menu shows by default, then I click on the search toggle and the search menu displays, then I click on the search toggle again and the search menu displays. At this point, I would like the main menu to remain.

    Would this have to do with menus.js?

    Moderator Kathryn


    Automattic Happiness Engineer

    acornrevolution – that would probably require some structural changes to the theme. If you want to explore this further, could you please start a separate thread, as this one is already marked resolved. Thanks.

    It’s not high on my to-do list, so if I can’t figure it out and I still want it, I’ll start a new thread.


    I’m also trying to have the primary menu always open..

    I have tried adding

    .panel#menu-toggle-nav {
    display: block;

    to my child theme as suggested by IliushaT, but it hasn’t worked. Do I need to delete another line somewhere?

    I’m a complete amateur here- no idea how to read the CSS etc.

    Moderator Kathryn


    Automattic Happiness Engineer

    Hi kirstieclicks – your menu is open for me by default when I first visit your site:

    Kirstie M Photography Adelaide Pet Photographer

    I haven’t clicked anything and the menu is already open.

    Could you try looking at your site in a different browser, or clearing your browser cache? It’s possible you’re still seeing an older version.

    as #Kirk White said at the 37 th line add active

    in the 37th line something like this appears

    <div id=”menu-toggle” class=”toggle” title=”<?php esc_a…

    in the middle


    did you mean to add there



    Moderator Kathryn


    Automattic Happiness Engineer

    I see that you managed to keep your menu open by default at

    The active class makes the menu (hamburger) icon a bit brighter than the other icons next to it, and is only necessary if you want that effect. If the menu is already open by default I don’t think it’s necessary to make the icon brighter, but it’s entirely up to you.

    thank you kathryn..but I tried doing “active” class…but nothing happened..i didnt find any change ๐Ÿ™
    Is my process correct?

    Moderator Kathryn


    Automattic Happiness Engineer

    reyvuelve – It looks like you’ve switched themes, but I did see it in effect on your site earlier today.

    The “active” class makes the icon a slightly brighter white. It’s a very subtle effect.

    You can see it in action on the demo here:

    Click the menu (hamburger) icon to see the active class applied – see how the icon becomes brighter?


    With active class:

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Menu that is easier to find’ is closed to new replies.