Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #80820
    Gert
    Member

    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

    #80839
    Mahesh
    Participant

    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.

    #80849
    Gert
    Member

    Thank you – works perfect 🙂

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Change layout on header right menu’ is closed to new replies.