New Landing › How can we help? › Cardinal › Menu items with different colors

Viewing 15 posts - 1 through 15 (of 25 total)
1 2
  • 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
Viewing 15 posts - 1 through 15 (of 25 total)
1 2

You must be logged in to reply to this topic.