Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 18, 2018 at 8:03 am #1011128
    AleschJ

    Dear Kriesi-Team

    I’d like to add an arrow on the right side of my WPML language switcher. I also would like to have a small border around the language switcher.

    Could you help me with this?

    Thanks a lot in advance!

    Best regards
    AleschJ

    September 18, 2018 at 3:11 pm #1011333
    Günter

    Hey AleschJ,

    Thank you for using Enfold.

    Out of the box this is not possible. I tried to find an easy solution – but there is none. You will need to hook into the creation of the HTML code for the menu.

    But this is beyond the scope of support and customization.

    For the border you can try:

    
#header_main .main_menu li.menu-item-language {
    border: 1px solid;
}

    Best regards,
    Günter

    September 19, 2018 at 4:19 pm #1011893
    AleschJ

    Hi Günter

    Thanks for your fast answer.

    I were able to add an arrow beside the language switcher with the following code (added to the custom CSS section): 

    .wpml-ls-current-language > a:after {
    content: "\25bc";
    font-size: 10px;
}

    Regarding the border: Your code works but the square should be less bigger than on the picture https://www.dropbox.com/s/e7d3sj3dabdigt1/Screenshot_Webpage_Mainmenu.png?dl=0

    Is that possible?

    Best regards
    AleschJ

    • This reply was modified 6 years, 1 month ago by AleschJ.
    September 20, 2018 at 2:03 pm #1012307
    Ismael

    Hi,

    Adjust the previous css code a bit.

    #top #avia-menu > .menu-item-language, #top #avia-menu > .menu-item-language > a {
    height: 30px !important;
    line-height: 30px !important;
    border: 1px solid #ffffff;
    padding: 0 3px;
    top: 25px;
}

#top .header-scrolled #avia-menu > .menu-item-language, #top .header-scrolled #avia-menu > .menu-item-language > a {
    top: 0;
}

    Best regards,
    Ismael

    September 24, 2018 at 9:58 am #1013529
    AleschJ

    Hi Ismael

    Thanks a lot for the code.

    It works fine, but the square is now a bit high:
    https://www.dropbox.com/s/gseo9bhjuklg92a/Screenshot_Webpage_Mainmenu_2.png?dl=0

    Is there a way that the box is always in line with the mainmenu?

    Best regards
    AleschJ

    September 25, 2018 at 6:58 am #1014018
    Ismael

    Hi,

    Adjust the value of the “top” css property. Current value is 25px.

    Best regards,
    Ismael

    September 25, 2018 at 7:28 am #1014026
    AleschJ

    Thanks a lot, this works. You can close this topic.

    Best regards
    Alesch

    • This reply was modified 6 years, 1 month ago by AleschJ.
    September 25, 2018 at 8:48 am #1014040
    Rikard

    Hi Alesch,

    Great, glad you got it working and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Add arrow beside and border around enfold language switcher’ is closed to new replies.