Display only certain categories on the Categorie side bar

• 

  lorenedevbil · Member · Mar 2, 2017 at 4:04 pm

  • Copy link
  • Add topic to favorites

  Hello,
  I have set up the Category widget on the right side of my blog but I don’t want to display all categories. Only few of them (the one in English to be precise).
  How can I select and display only the categories I want?
  Thanks a lot for your help
  Loren

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 3, 2017 at 2:51 am

  • Copy link

  There isn’t a way to exclude categories from the category widget, but what you can do is to create a custom menu and add only the categories you wish to show, and then use a Custom Menu Widget.

• 

  lorenedevbil · Member · Mar 3, 2017 at 4:00 pm

  • Copy link

  Thank, it’s a brilliant idea!

  I tried to use some of the coding you gave me earlier to customize the style and color, for the item “I’m a parent” of this new menu:
  #menu-item-156 a {
  font-weight: bold;
  color: #6FCED8;
  }

  But the code applied to all children items.
  How could I prevent this?

  Would you have a code to apply a different style to the children only? I would like them not bold and grey.

  Thanks a lot!

• 

  otpidusprime · Member · Mar 3, 2017 at 4:16 pm

  • Copy link

  Hi there,
  It’s happening because the

  is also a child element of #menu-item-156.

  Try using this CSS code:
  ul.sub-menu > li > a {
  color: #9c9c9c !important;
  font-weight: 400 !important;
  }

  Hope this solves the issue. :)

• 

  lorenedevbil · Member · Mar 3, 2017 at 4:19 pm

  • Copy link

  Hello,
  Thank you very much and I’m sorry to ask this but, would you have a code that doesn’t use !Important ?
  I have been told that I should try not to use it unless there is absolutely no other way…
  Thanks

• 

  otpidusprime · Member · Mar 3, 2017 at 4:23 pm

  • Copy link

  Sure,
  If you do not want to use !important, then just make changes to the CSS of “#menu-item-156” with this following code:
  #menu-item-156 > a {
  font-weight: 700;
  color: #6FCED8;
  }

• 

  otpidusprime · Member · Mar 3, 2017 at 4:25 pm

  • Copy link

  And if you want to do the same with all your menu’s in the sidebar then use the following code:
  .menu-item-has-children > a {
  font-weight: 700;
  color: #6FCED8;
  }

  Have a nice day :)

• 

  lorenedevbil · Member · Mar 3, 2017 at 5:05 pm

  • Copy link

  Thanks, it’s lovely!

  However, the code for the children doesn’t work. I think I did it wrong:
  #menu-item-156 > a {
  font-weight: 700;
  color: #6FCED8;
  }
  .menu-item-has-children > a {
  font-weight: 700;
  color: #495C6E;
  }

• 

  otpidusprime · Member · Mar 3, 2017 at 5:08 pm

  • Copy link

  You forgot the ‘>’ symbol in you original code

  #menu-item-156 a {
  font-weight: bold;
  color: #6FCED8;
  }

  which targets the immediate child element, and not all the children elements inside it. If that’s what you are implying.

  Let me know if something’s wrong… I would be happy to help.

• 

  lorenedevbil · Member · Mar 3, 2017 at 5:18 pm

  • Copy link

  I’m sorry I don’t get it….

  The ‘>’ symbol is there:
  #menu-item-156 > a {
  font-weight: 700;
  color: #6FCED8;
  }
  .menu-item-has-children > a {
  font-weight: 700;
  color: #495C6E;
  }

  My problem is I want the children items of “I’m a parent” to be gray (#495C6E) but it doesn’t work…

  Thanks

• 

  otpidusprime · Member · Mar 3, 2017 at 5:18 pm

  • Copy link

  Okay, i found your CSS already has the following code:

  #menu-item-156 > a {
    font-weight: 700;
    color: #6FCED8
  }
  
  .menu-item-has-children > a {
    font-weight: 700;
    color: #495C6E
  }
  
  #menu-item-157 > a {
    font-weight: 700;
    color: #6FCED8
  }
  
  .menu-item-has-children > a {
    font-weight: 700;
    color: #495C6E
  }

  you used the children codes twice and after #menu-item-156 and #menu-item-157 which cancels the children code, i recommend you remove the following codes:

  #menu-item-156 > a {
    font-weight: 700;
    color: #6FCED8;
  }
  
  #menu-item-157 > a {
    font-weight: 700;
    color: #6FCED8;
  }

  and just use this code once:

  .menu-item-has-children > a {
    font-weight: 700;
    color: #6FCED8;
  }

• 

  otpidusprime · Member · Mar 3, 2017 at 5:25 pm

  • Copy link

  Ohhh okay, if i am not wrong you just want the children items of “i’m a parent” grey right?

  Alright, use this code for that:

  #menu-item-156 > ul > li > a {
      color: #495C6E;
  }

  Hopefully this will solve your problem. Let me know…

• 

  lorenedevbil · Member · Mar 3, 2017 at 5:35 pm

  • Copy link

  Everything is perfect now, thank you very much!

• 

  otpidusprime · Member · Mar 3, 2017 at 5:40 pm

  • Copy link

  Glad i could help.
  Sorry for some misunderstanding’s though.

  Have a nice day. :)