Okay
  Public Ticket #2004789
To display Social icons in menu(header) to right
Closed

Comments

  • Saravana Prakash started the conversation
    May 9, 2019 at 11:49am

    Actually, the salient theme has the feature to display the social icons in left side of the menu(header). But, in our design we followed to display the social icons on the right side of the menu(header). To do that I wrote the below code.

    FYI:

    /*logo menu from left 0 to left 1146*/
    #header-outer[data-format="centered-logo-between-menu"] nav #social-in-menu {
        left:  1146px;
    }
    /*// Extra large devices (large desktops, 1200px and up)*/
    @media (min-width: 1200px){
    /*logo menu from left 0 to left 1146*/
    #header-outer[data-format="centered-logo-between-menu"] nav #social-in-menu {
        left:  1197px;
    }
    }

    @media (min-width: 1440px){
    /*logo menu from left 0 to left 1146*/
    #header-outer[data-format="centered-logo-between-menu"] nav #social-in-menu {
        left:  1271px;
    }
    }

    @media (min-width: 1920px){
    /*logo menu from left 0 to left 1146*/
    #header-outer[data-format="centered-logo-between-menu"] nav #social-in-menu {
        left:  1500px;
    }      
    }

    But it's not the responsive fix.I used right: 0; for #social-in-menu still it doesn't works expected. I need a proper fix with responsiveness. Please help me to fix this issue.

  •  8,994
    Tahir replied
    May 9, 2019 at 12:00pm

    Hey Again,

    Only use the css below.

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    #header-outer[data-format="centered-logo-between-menu"] nav #social-in-menu {
    position: absolute;
    left: auto ;
    right: 0px !important
}

    Thanks

    ThemeNectar Support Team