Help to display header topmenu together with WPML

This topic has 6 replies, 2 voices, and was last updated 8 years, 6 months ago ago by Eva Kemp

  • Avatar: groubee
    groubee
    Participant
    September 13, 2015 at 01:12

    Hi

    I hope you can help me with some css to display WPML language menu in the header topmenu.

    See how it looks now: http://dev-smooff.serv10.powerhosting.dk/

    See how we would love it so be: https://www.dropbox.com/s/5f07yememmpo93h/header-language-menu-design.jpg?dl=0

    – the menu text should be align with text inside the language menu dropdown box – and the language inside the dropbox should also be aligh(middle) with the flag icon.

    – the box color should be transparent, white on mouseover. And is it not possible to make it smaller, not so long as now?

    I really hope you can help me.

    Best regards
    Tonny

    5 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    September 14, 2015 at 10:17

    Hello,

    Please use this css code:

    .languages-area #lang_sel_click li, .languages-area #lang_sel_click ul ul {
       width: 100px !important;
    }
    .languages-area #lang_sel_click img.iclflag {
       top: -1px;
    }
    .languages-area .widget_icl_lang_sel_widget {
        padding-top: 0px;
        margin-top: -3px;
    }
    #lang_sel_click a {
       background-color: transparent !important;
    }
    #lang_sel_click a:hover {
       background-color: white !important;
    }

    Regards,
    Eva Kemp.

    Avatar: groubee
    groubee
    Participant
    September 14, 2015 at 13:39

    Great Eva – I love your support!! 🙂

    I just have some few more things I hope you can help me with?
    See
    https://www.dropbox.com/s/wg2rl5sneftovy7/header-language-menu-designV2.jpg?dl=0

    – The white “pin” between “My account” and “logout”… can it be in the same color as the text?

    – Would it be possible to add one more “pin between “Logout” and add the text “Language:”?

    – Would it be possible to remove the WPML box border – and only show it on mouseover

    – And remove the “My account” and “Logout” if the burger menu is shown + center “Language:+box” ? 🙂

    This would be SUPER nice!!!

    best regards
    Tonny

    Avatar: Eva
    Eva Kemp
    Support staff
    September 14, 2015 at 17:51

    Hello,

    Please use this code:

    .links li:after {
      background-color: #000;
    }

    In this case you need edit the file wp-content/themes/woopress/framework/theme-functions.php (from line 901) and add the code you need.

    Add this code to remove the border:

    #lang_sel_click a {
      border: none;
    }
    #lang_sel_click a:hover {
        border: 1px solid #CDCDCD;
    }

    Do you mean you want to remove the “My account” and “Logout” links on mobile?

    Regards,
    Eva Kemp.

    Avatar: groubee
    groubee
    Participant
    September 14, 2015 at 18:07

    Thanks a lot, I will try it now

    – Yes, when the Burger menu is shown(on mobile), the “My account” and “Logout/login” is shown inside the burger menu and that is super – therefore it would be great to remove them from the header top.

    Avatar: Eva
    Eva Kemp
    Support staff
    September 14, 2015 at 20:28

    Hello,

    Please add this code in custom.css:

    @media (max-width: 992px) {.top-links {
       display: none;
    }}

    Regards,
    Eva Kemp.

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.