WordPress.org

Ready to get started?Download WordPress

Forums

Sorbet
[resolved] Menu that is easier to find (15 posts)

  1. IliushaT
    Member
    Posted 11 months ago #

    Hello!

    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.

  2. ruphel
    Member
    Posted 11 months ago #

    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.

    Regards

    Ruairi

  3. IliushaT
    Member
    Posted 11 months ago #

    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”
    menuToggle.addClass('active');
    I do not know, though, how to modify this code with a child theme.

  4. Kirk Wight
    Theme Wrangler
    Posted 11 months ago #

    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.

  5. IliushaT
    Member
    Posted 11 months ago #

    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.

  6. Kirk Wight
    Theme Wrangler
    Posted 11 months ago #

    Ha, I consider that a great compliment, thank you :)

  7. acornrevolution
    Member
    Posted 10 months ago #

    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?

  8. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    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.

  9. acornrevolution
    Member
    Posted 10 months ago #

    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.

    Thanks!

  10. kirstieclicks
    Member
    Posted 10 months ago #

    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.

  11. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

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

    https://cloudup.com/c1c8KtF3JQv

    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.

  12. reyvuelve
    Member
    Posted 7 months ago #

    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

    class="toggle"
    did you mean to add there
    active
    ??

  13. I see that you managed to keep your menu open by default at downloadsrc.com

    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.

  14. reyvuelve
    Member
    Posted 7 months ago #

    thank you kathryn..but I tried doing "active" class...but nothing happened..i didnt find any change :(
    Is my process correct?

  15. 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:

    http://sorbetdemo.wordpress.com/

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

    Default: https://cloudup.com/ctE-onD_u9w

    With active class: https://cloudup.com/cO-d80TROCK

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.