One item of menu in different color

Hi guys,

I’ve designed my website www.myteamshop.de using the WP Sydney theme. Although the website itself works fine there are still some issues to be addressed / some adjustments to be made:

I’d like to have the menu item “Home” in a different color that the other items. How can I do so?

I have already applied some piece of CSS, maybe this helps to further understand the logic of my website:

.btn-menu{
     color: #000;
}
 @media only screen and (max-width:1025px){
     .header-wrap .container{
         text-align: left;
    }
     .header-wrap .btn-menu{
         float: right;
         margin-right: 15px;
    }
     .header-wrap .col-md-4 {
         max-width: 90%;
         position: relative;
         z-index: 1000;
    }
     .header-wrap .col-md-8 {
         margin-top: -60px;
    }
     #mainnav-mobi {
         top: 70px;
    }
}
 #mainnav-mobi ul > li > a {
     color: black;
}
 #mainnav-mobi {
     background-color: white;
}
 @media only screen and (min-width: 1024px) and (max-width: 1024px) {
     .slide-inner {
         top: 40%;
         padding-left: 100px !important;
    }
     .subtitle {
         top: 0%;
         padding-left: 0px !important;
         padding-top: 50px !important;
         text-align: left;
         font-size: 28px !important;
    }
     .maintitle {
         padding-left: 0px !important;
         text-align: center;
    }
     .roll-button {
         top: 50px;
         left: -310px;
    }
     .nf-form-content input[type="button"] {
         color: #FEFEFE !important;
         background-color: #102C3D !important;
         font: 13px lato, raleway;
         font-weight: bold;
    }
}
 @media only screen and (min-width: 1025px) {
     .slide-inner {
         top: 45%;
         padding-left: 100px !important;
    }
     .subtitle {
         top: 0%;
         padding-left: 0px !important;
         padding-top: 100px !important;
         text-align: left;
         font-size: 28px !important;
    }
     .maintitle {
         padding-left: 0px !important;
         text-align: center;
    }
     .roll-button {
         top: 20px;
         left: -445px 
    }
     .nf-form-content input[type="button"] {
         color: #FEFEFE !important;
         background-color: #102C3D !important;
         font: 13px lato, raleway;
         font-weight: bold;
    }
}
 @media only screen and (min-width: 375px) and (max-width: 812px) {
     .slide-inner {
         top: 40%;
         padding-left: 10px !important;
    }
     .subtitle {
         top: 0%;
         padding-left: 10px !important;
         padding-top: 30px !important;
         text-align: left;
         font-size: 16px !important;
    }
     .maintitle {
         padding-left: 0px !important;
         text-align: center;
    }
     .roll-button {
         top: 32px;
         left: -90px 
    }
     .nf-form-content input[type="button"] {
         color: #FEFEFE !important;
         background-color: #102C3D !important;
         font: 13px lato, raleway;
         font-weight: bold;
    }
}
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
     .header-wrap .btn-menu {
         margin-top: 50px;
    }
}

I really hope you can help me with these issues.

Thanks a lot.

Regards,
Sebastian

Hello Sebastian,

Try adding this custom CSS code:

    .mainnav li#menu-item-195 > a {
      color: #fff000;
    }

    .mainnav li#menu-item-195 > a:hover {
      color: #ff0000;
    }

Regards,
Kharis