Make Toggle Menu Fixed

Hi there, on changing the Menu icon to the word Menu, give the following CSS a try.

.toggles #menu-toggle::before {
    content: "Menu";
    position: relative;
    top: -5px;
}
#menu-toggle {
    width: 90px;
}

With the menu button being a toggle, I can’t come up with a way of keeping the menu open by default with CSS since the minute you click the button, the menu closes and then reopens. Normally you could make a child theme, but Quadra is a child of Hexa, and you can’t make a grandchild theme in WordPress. I see a few options.

1. Fork Quadra (make your own copy with a different name) and then take the menu.js file from Hexa, rename it in your forked child theme, change it to give the functionality you want and then in the functions.php file in your forked child, dequeue the menu.js and enqueue your new my-menu.js file.

Downsides are that your forked theme will not be updated when Quadra is updated.

2. See this on creating a quasi-grandchild theme. This isn’t an officially supported method, but one you may want to take a look at.

3. The least attractive method would be to do #1 above directly to Quadra, but this means that a future theme update may overwrite your changes.

With any of the above, you will want to use Media Queries to limit the menu defaulting to open on screens 780px and narrower (when the touch menu becomes active) otherwise users would have to scroll a down quite a way in order to close the menu or read the content, and each time they changed pages or posts, they would have to again close the menu or scroll way down.

Thank you Sacredpath for your reply, I’m really grateful!

Unfortunately, using the above css didn’t work to replace the Menu icon with the word Menu.
I do see your point with the 3 options suggested, however, before I launch into a ‘full scale project’ on that, could you kindly help with fixing this Menu issue first? Because that would solve like 60% of this problem!
I thought it would be so easy…

Many thanks again!

Hmmm, the CSS works fine on my test site. See the screenshot from my test site. I copied and pasted the above CSS directly into the CSS file in my Child Theme.

Since i can’t see your site, and don’t know what other customizations you may have done, I can only work off the Child Theme I created for Quada on my test site.

I also activated Quardra base theme and then added the CSS I have above using the Edit CSS feature in Jetpack and then also tested by adding it directly to the Quadra CSS file at the very bottom and in all cases the CSS worked.

I had installed Quadra directly through Appearance > Themes.

Are you using a Custom CSS plugin of some sort, or are you trying to add the CSS to a Child Theme CSS file, or are you adding it directly to the Quadra CSS file?

Hi Sacredpath, it worked!
I’m not sure of what I must have done wrong initially but I tried it again and it worked, Thank you sooo much! Really grateful.

Thanks again!

Hooray and you are welcome. ??