Menu that is easier to find

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

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.

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.

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?

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.

Thanks!

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.

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

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

class=”toggle”

did you mean to add there

active

??

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.

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

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:

https://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