How Do I Find The CSS of My Menu?

One common question I get asked alot is how to find the correct information to put in the “CSS of Menu To Hide” option box inside the Responsive Menu admin options page.

This is one of the most important options when first installing the plugin as it means you won’t have both the Responsive Menu and your original menu showing on smaller screens.

Class or ID

Before we start, you will need to know a little bit of CSS to know what you are looking for and how they work. When you inspect an element (or look at the source code of a site) you will notice that there are alot of reference to things such as id=”menu” or class=”menu”.

To keep this as brief as possible, ID’s MUST be unique on a page (you can’t have more than one element with id=”menu” on), whereas you can have unlimited elements with the same class. Also, IDs take higher precedence over classes in stylesheets and without trying to get too technical classes have a specificity score of 10 and IDs a score of 100. The only thing that “beats” an ID is an inline style with a score of 1000 (horrible little things).

The most important thing you need to know, however is that class names in CSS start with a dot(.) and IDs with a hash(#), meaning in our example above, to target an element with an ID of “menu” and a class of “menu” you could do it in either way as follows:

ID

#menu { }

Class

.menu { }

Ok – that’s great, but how do I find the relevant ID or class for my menu?

Glad you asked, below are a selection of the 3 most popular browsers and how to find the specific Menu CSS ID or Class that you need (we will be using this very site as our example).

To be honest however, they are pretty much all the same process so once you know how to do it one browser you can do it in them all.

Finding the Class or ID name

1. Navigate to your page and Press “F12” to bring up the element inspector
2. Click the magnifying glass icon in the far top left as below:

element-inspector

3. Move the mouse around the page until your current menu becomes highlighted, as below:

select-menu

4. Click once highlighted, and then look at the source code that has been highlighted in the bottom element inspector:

class-selected

As you can see from the image above, my menu has an id of “menu”, so all I need to do is put “#menu” (remember we use a hash symbol for IDs) in my “Css of Menu to Hide” option and save.

Alternatively to using the magnifying glass around the page, you can simply hover your mouse over the source code in the bottom section and it will highlight the different sections automatically, either way will give you the same results.

Of course if you have any questions on the above then please let me know!