Title: Make Toggle Menu Fixed
Last modified: August 24, 2016

---

# Make Toggle Menu Fixed

 *  Resolved [NgbX](https://wordpress.org/support/users/ngbx/)
 * (@ngbx)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/make-toggle-menu-fixed/)
 * Hi,
    I created a small blog for a client’s website with Quadra which he absolutely
   loves, but wants the Menu icon changed to a simple MENU text instead. Also, how
   can I make the Menu bar Show by default and Disappear (rather than Appear) when
   the Menu/Icon is clinked?
 * Thanks in anticipation!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * (@sacredpath)
 * Automattic Happiness Engineer
 * [11 years, 1 month ago](https://wordpress.org/support/topic/make-toggle-menu-fixed/#post-5959071)
 * 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](https://wordpress.org/support/topic/what-is-forking?replies=3)(
   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](https://codex.wordpress.org/Function_Reference/wp_dequeue_script)
   the menu.js and [enqueue](https://codex.wordpress.org/Function_Reference/wp_enqueue_script)
   your new my-menu.js file.
 * Downsides are that your forked theme will not be updated when Quadra is updated.
 * 2. [See this](http://docs.appthemes.com/tutorials/creating-grandchild-themes/)
   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.
 *  Thread Starter [NgbX](https://wordpress.org/support/users/ngbx/)
 * (@ngbx)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/make-toggle-menu-fixed/#post-5959092)
 * 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!
 *  [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * (@sacredpath)
 * Automattic Happiness Engineer
 * [11 years, 1 month ago](https://wordpress.org/support/topic/make-toggle-menu-fixed/#post-5959129)
 * Hmmm, the CSS works fine on my test site. See the [screenshot](https://cldup.com/kzeN1sC3-l.png)
   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?
 *  Thread Starter [NgbX](https://wordpress.org/support/users/ngbx/)
 * (@ngbx)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/make-toggle-menu-fixed/#post-5959135)
 * 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!
 *  [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * (@sacredpath)
 * Automattic Happiness Engineer
 * [11 years, 1 month ago](https://wordpress.org/support/topic/make-toggle-menu-fixed/#post-5959137)
 * Hooray and you are welcome. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Make Toggle Menu Fixed’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/quadra/1.0.3/screenshot.png)
 * Quadra
 * [Support Threads](https://wordpress.org/support/theme/quadra/)
 * [Active Topics](https://wordpress.org/support/theme/quadra/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/quadra/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/quadra/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [sacredpath](https://wordpress.org/support/users/sacredpath/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/make-toggle-menu-fixed/#post-5959137)
 * Status: resolved