[Gert]

Hi,
How is it possible to change the layout for the header right menu?
Check website: http://www.playprop.com – and the call-to-action menu in the header right.

I need custom css code for the following:
1. Having different background color on the different menu items. Just show an example, please.
2. Black border (1 px.) around every menu item.
3. A little space between the different menu items.

Would that be possible for the header right menu?

Kind regards,
Gert

[Mahesh]

Hi @Gert,

Yes, it is possible to change the layout for the header right menu. Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS Options” box and add the following CSS.

Please change the color and space as per your requirement.

/* Change background for 1st menu item */
#menu-call-to-action-menu li:nth-child(1) {
     background-color: #FF0000;
}

/* Change background for 2nd menu item */
#menu-call-to-action-menu li:nth-child(2) {
     background-color: #0000FF;
} 

/* Change background for 3rd menu item */
#menu-call-to-action-menu li:nth-child(3) {
     background-color: #01DF01;
} 

/* Add space between menu and black border to menu items */
#menu-call-to-action-menu li{
     margin-left: 5px;
     border: 1px solid #000000;
}

#menu-call-to-action-menut li:first-child{
     margin-left: 0;
}

Please remove following style from Custom CSS box to remove background-color for Header Right Menu:
.nav-header-right .menu { background-color: #e03a3e; }

Let me know if this worked for you as desired.

Thanks.

[Gert]

Thank you – works perfect 🙂

[Author]

Posts