ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• October 6, 2015 at 2:58 pm #218852
  WineDesignNL

  Member

  Post count: 204

  Hi there,

  I want to change the colors of every menu-item individual, but the theme seems to overwrite every input I put in the css.
  I want Nav / Sticky Header Background Color to be white and the individual items have to become 6 different colors.

  My try so far:

  
.nav #menu-item-11640 li {color: #F8B334; !important }
.nav #menu-item-11640 li:hover {color: #F8B334; !important }


  * this is for menu-item “vraagprijs” – second one from the left.

  But nothing seems to happen… Could you please help me out?

  Thanks!

  October 6, 2015 at 3:27 pm #218864
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Hi,

  Your css syntax wasn’t correct, the important should be before the semicolon.

  Try this one

  .nav #menu-item-11640 li {color: #F8B334!important; }
  .nav #menu-item-11640 li:hover {color: #F8B334!important; }

  -Rui

  October 6, 2015 at 3:51 pm #218876
  WineDesignNL

  Member

  Post count: 204

  Hi Rui,

  This didn’t work.

  
.nav #menu-item-11632 li {color: #E85127!important; }
.nav #menu-item-11632 li:hover {color: #F85127!important; }

  .nav #menu-item-11640 li {color: #F8B334!important; }
  .nav #menu-item-11640 li:hover {color: #F8B334!important; }

  .nav #menu-item-11647 li {color: #698C25!important; }
.nav #menu-item-11647 li:hover {color: #698C25!important; }


  I tried with 3 menu-items!

  October 6, 2015 at 4:08 pm #218884
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Just a doubt it’s the color of the text or the entire background color of the menu item? Or both?

  Like this
  https://www.dropbox.com/s/ujeectq79944ujb/Screenshot%202015-10-06%2016.09.39.png?dl=0

  -Rui

  October 7, 2015 at 9:20 am #219016
  WineDesignNL

  Member

  Post count: 204

  Hi Rui,

  It’s the entire background like your screenshot! And if possible, I want all the menu-items to be the same width and stretch full-width (1200px). Is this also possible?

  Thanks again!

  October 7, 2015 at 10:42 am #219047
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  .nav #menu-item-11632 li {background: #E85127!important; }
  .nav #menu-item-11632 li:hover {background: #F85127!important; }
  
  .nav #menu-item-11640 li {background: #F8B334!important; }
  .nav #menu-item-11640 li:hover {background: #F8B334!important; }
  
  .nav #menu-item-11647 li {background: #698C25!important; }
  .nav #menu-item-11647 li:hover {background: #698C25!important; }
  #header-section{background:#000 !important;}

  Thanks
  Mohammad

  October 7, 2015 at 11:03 am #219062
  WineDesignNL

  Member

  Post count: 204

  Hi Mohammad,

  No results! Only full-width #000 header.

  October 7, 2015 at 11:11 am #219069
  WineDesignNL

  Member

  Post count: 204

  This seems to work, but also when I use the ‘a tag’ instead of the ‘li tag’, nothing happens.

  Attachments:

  You must be logged in to view attached files.
  October 7, 2015 at 11:26 am #219076
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  What is the problem in li tag? Why do you want to use a tag instead of li tag?
  Thanks
  Mohammad

  October 7, 2015 at 11:31 am #219079
  WineDesignNL

  Member

  Post count: 204

  When I use the

  .nav #menu-item-11632 a {background: #E85127!important; }
  .nav #menu-item-11632 a:hover {background: #F85127!important; }

  .nav #menu-item-11640 a {background: #F8B334!important; }
  .nav #menu-item-11640 a:hover {background: #F8B334!important; }

  .nav #menu-item-11647 a {background: #698C25!important; }
.nav #menu-item-11647 a:hover {background: #698C25!important; }
#header-section{background:#000000 !important;}


  nothing is happening in my site. Just when I use develop mode and put background style in the ‘a tag’ (see image) it will take a different background color. But when I put this in the CSS file nothing happens.

  October 7, 2015 at 12:01 pm #219086
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  .nav li.menu-item-11632 a {background: #E85127!important; }
  .nav li.menu-item-11632 a:hover {background: #F85127!important; }
  
  .nav li.menu-item-11640 a {background: #F8B334!important; }
  .nav li.menu-item-11640 a:hover {background: #F8B334!important; }
  
  .nav li.menu-item-11647 a {background: #698C25!important; }
  .nav li.menu-item-11647 a:hover {background: #698C25!important; }
  #header-section{background:#000000 !important;}

  Thanks
  Mohammad

  October 7, 2015 at 1:45 pm #219123
  WineDesignNL

  Member

  Post count: 204

  Hi Mohammad,

  Tried
.nav li.menu-item-11632 a {background: #E85127!important; }
.nav li.menu-item-11632 a:hover {background: #F85127!important; }

  .nav li.menu-item-11640 a {background: #F8B334!important; }
  .nav li.menu-item-11640 a:hover {background: #F8B334!important; }

  .nav li.menu-item-11647 a {background: #698C25!important; }
.nav li.menu-item-11647 a:hover {background: #698C25!important; }
#header-section{background:#E57127 !important;}

  Changed header-section background to orange, so you can see the theme options overrule custom css. I have fixed width for menu/ site.

  October 7, 2015 at 2:55 pm #219146
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  I need login detail to check and resolve the issue.
  Thanks
  Mohammad

  October 7, 2015 at 3:11 pm #219152
  WineDesignNL

  Member

  Post count: 204

  This reply has been marked as private.
  October 8, 2015 at 10:10 am #219353
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  I have resolved the issue so please check it now.

  Thanks
  Mohammad

• Back to forum

  Posted in: Cardinal