Add flags to the header.

  • Resolved michalrama

    (@michalrama)


    4 years, 5 months ago

    Hello,

    I need to insert buttons in the form of flags next to each other in the right corner of the header. (same as on the arbela.cz website)

    However, only menus (not widgets) can be inserted in the header, so this is necessary using code.

    Could you write me how to do it, please?

    Thank you

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author edo888

    (@edo888)

    4 years, 5 months ago

    Hi,

    You can use [gtranslate] shortcode to display it anywhere on your website.

    If your header is a menu, you can add Shortcode in Menus plugin to enable shortcode execution in menus.

    Thanks! 🙂

    Thread Starter michalrama

    (@michalrama)

    4 years, 5 months ago

    Hello,

    Thank you. The flags are already displayed in the header menu.

    The problem is two things:

    1. Flags are displayed at the end of the menu, not at the end of the header itself, which contains additional elements added by the template. This could be solved here with CSS, because the elements in the header are just a list of <li> elements. But I don’t know how to change their order, please?

    2. Flags are displayed below each other, not next to each other. Not only does it look clearer side by side, but most importantly, it increases the overall height of the head. But can it be changed, please?

    Thank you

    PS. More on the web where I tested it. – http://testtheme.euweb.cz/

    Thread Starter michalrama

    (@michalrama)

    4 years, 5 months ago

    UDPATE

    1. So I managed to partially solve the problem with this code.

    ul#primary-menu li:nth-child(4){
  order: 1;
}

    The problem is that this code is completely dependent on the number of elements. If I add another item to the menu, it will no longer apply.

    2. This is obviously at the level of the plugin itself. Will you have to tell me how to make the flags appear side by side, please?

    Thread Starter michalrama

    (@michalrama)

    4 years, 5 months ago

    UPDATE:

    I’ve figured it out.

    1. To place an element at the end of a list, you only need to know the id.

    $("#menu-item-1124").appendTo("#primary-menu");

    2. Flags are only a list <a> in <li>. Therefore, you only need to adjust their display.

    $("#primary-menu > li > a").css("display", "inline-block");

    Then it is still possible to add spaces so that the flags are not crammed side by side.

    $("#menu-item-1124 > a").css("padding-right", "10px");

    Thank you anyway.

    Plugin Author edo888

    (@edo888)

    4 years, 5 months ago

    Hi,

    That is great.

    I notice that you do CSS adjustments using js, which is not executed before the page is loaded, so for some moment you can see the flags on top of each other.

    I would suggest you to do that via CSS.

    #menu-item-1124 > a {padding-right:10px !important;display:inline-block !important;}

    Thanks! 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Add flags to the header.’ is closed to new replies.