Title: Menu through widget
Last modified: August 21, 2016

---

# Menu through widget

 *  [bersch](https://wordpress.org/support/users/bersch/)
 * (@bersch)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/menu-through-widget/)
 * Hello,
 * I have a question about a secondary menu in a widget. The thing I want to have
   is the following: On my site I have a page products. This page is mentioned in
   my main menu. When somebody clicks on this page, the products page opens and 
   a secondary menu in a widget will appear on the left side. In this menu, a list
   of products are shown. So
    -  product1
       product2 product 3
 * Now, how can I have this secondary menu only be shown when the page products 
   or one of the products is selected? So after clicking on the page products, the
   menu will appear. But also, after clicking opening the page products, when selecting
   for example product1 the secondary menu must still be shown.
 * Can anyone help me with this?
 * Thanks in advance.
 * Kind regards,
 * Luc

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

 *  Thread Starter [bersch](https://wordpress.org/support/users/bersch/)
 * (@bersch)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/menu-through-widget/#post-5088313)
 * The URL of my page is new.breedveldtrading.com
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/menu-through-widget/#post-5088337)
 * Hi, Luc:
 * Each of the widgets inside the sidebar will have an ID associated with it. You
   can see what the ID is by doing a “view source” of any of the site’s pages, or
   using a web debugging tool like [Firebug](http://getfirebug.com/) or [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/).
   I see you already placed a menu in the sidebar, and it has an ID of **nav_menu-
   2**.
 * Also, every page will have an ID associated with its body element. Again, you
   can see that that page ID is by doing a “view source” or using a web debugging
   tool. That page ID will appear in the form of a class name. For example, [the Producten page](http://new.breedveldtrading.com/producten/)
   has a class called **page-id-87**.
 * So to display a widget only on certain pages, you would first hide the widget
   by default, then add a rule which displays the widget on certain pages:
 *     ```
       #nav_menu-2 {
          display: none;
       }
   
       .page-id-87 #nav_menu-2 {
          display: block;
       }
       ```
   
 * The first rule hides the sidebar menu by default. The second rule would display
   the menu on the Producten page. For every page that you want to display, you 
   just add another selector to the last rule. For example, [the RVS Producten page](http://new.breedveldtrading.com/rvs-producten/)
   has a class of **page-id-15**, so the last rule would be modified like this:
 *     ```
       .page-id-15 #nav_menu-2,
       .page-id-87 #nav_menu-2 {
          display: block;
       }
       ```
   
 * You can see, however, that it would be very tedious to add a selector for every
   product page, especially if you have a lot of products. What I would do is to
   create a [post](http://codex.wordpress.org/Administration_Panels#Posts) for every
   product, instead of a page. One of the features of a post is that you can assign
   one or more [categories](http://codex.wordpress.org/Administration_Panels#Categories)
   to it. For example, you have already created a category called Producten, and
   you can create another category called RVS-Producten. Then when you create a 
   post for your products, you would assign one or the other of the categories to
   it.
 * Assigning categories to your posts will have a couple of important advantages.
   First, the CSS would be greatly simplified if you only create posts for products(
   both regular products and stainless steel products) and nothing else. That is
   because every post will have, as part of its body element, a class called **single-
   post**, so the second rule would end up looking like:
 *     ```
       .single-post #nav_menu-2 {
          display: block;
       }
       ```
   
 * The second advantage would be that it would be very easy to create a page that
   listed all of the products in a particular category. You’ve probably noticed 
   that in your sidebar, you have a section labeled CATEGORIEËN with the Producten
   category listed. Clicking on the Producten category would give you a list of 
   all posts that have that catetory assigned to it. The list would show the title
   of the post (which you would set as the name of the product) and an excerpt of
   the post contents. And you can copy what you currently have for the contents 
   of your Producten page into the Category description for the producten category
   so that it displays at the top of the page.
 *  Thread Starter [bersch](https://wordpress.org/support/users/bersch/)
 * (@bersch)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/menu-through-widget/#post-5088354)
 * Hi CouchingBruin,
 * This does work! Thank you so much.
 * I got one new question, but this one is on a different subject. I have created
   a new thread here:
    [http://wordpress.org/support/topic/wordpress-table-alignment?replies=1#post-5790376](http://wordpress.org/support/topic/wordpress-table-alignment?replies=1#post-5790376)
 * Could you help me with this as well?
 * Thanks!
 * Kind regards,
 * Luc

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

The topic ‘Menu through widget’ is closed to new replies.

## Tags

 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [widget](https://wordpress.org/support/topic-tag/widget/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [bersch](https://wordpress.org/support/users/bersch/)
 * Last activity: [11 years, 10 months ago](https://wordpress.org/support/topic/menu-through-widget/#post-5088354)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
