How to add a graphic with a link on the right side of the menu bar

Hello,

I am trying to put a graphic of the germany flag with the link to our german website on the right side of the menu bar.
Can this be done?

Thanks a ton!
Leni

Hi Leni,

I hope you are well today and thank you for your question.

You can create custom link menu item in the last of your menu and assign custom class and URL to it.

Then share me your site URL and germany flag image URL so that i can help you to display it on your site.

Best Regards,
Movin

Hello Movin,

Thanks for your help.
I already made a costom link in the menu, BUT 1. how can i add a picture there and 2. how can i put it on the right side, so there is a distance between flag and menu.

For our english version (yogtemple.com) I need the german flag (http://www.german-flag.org/german-640.gif)

And for our german version (yogtemple.at) I need the english flag (https://upload.wikimedia.org/wikipedia/commons/0/0b/English_language.svg)

Thanks!

As requested above could you please also share me your site URL?

as mentioned above already:
http://yogtemple.at/ (German side)
http://yogtemple.com/ (English side)

Thanks! :slight_smile:

Sorry i didn’t notice it as they don’t contain HTTP in URLs.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.navbar-default #menu-item-719 {
    float: right;
    margin: 0 0 0 50px;
    padding-top: 18px;
}

.navbar-default #menu-item-719 a {
    background: url("http://www.german-flag.org/german-640.gif") no-repeat center;
    background-size: 100%;
    font-size: 0;
    padding: 15px;
}

.navbar-default #menu-item-245 {
    float: right;
    margin: 0 0 0 50px;
    padding-top: 18px;
}

.navbar-default #menu-item-245 a {
    background: url("https://upload.wikimedia.org/wikipedia/commons/0/0b/English_language.svg") no-repeat center;
    background-size: 100%;
    font-size: 0;
    padding: 15px;
}

Awesome! Thanks it worked :slight_smile:

Just one problem: Flag and link is there, but it is not on the right side, but somewhere floating between menu and right side.

any solution for that?

To display it in the right side please use the following custom CSS code.

.collapse.navbar-collapse.navbar-ex1-collapse {
    float: none;
}

#page .nav.navbar-nav {
    float: none;
}

Worked perfectly! :slight_smile:

You are most welcome here :slight_smile: