Adding a Flag symbol to the main menu?

Hello Ismael,

I have added a flag symbol to my main menu using in the Menu Navigation Label field.

However, please look at https://www.option-webdesign.nl and you see the flag is not properly aligned; it’s a bit to high.

How do I align the flag symbol with the rest of the menu links?

Thanks,
Alwin

That worked great; thank you Rikard!

Alwin

Two more questions about this:

1 – When you look at https://www.option-webdesign.nl on a desktop screen you can see the flags in the main menu.

However, when you open the site on a mobile screen you can not see the flags anymore, until you open the mobile menu. This way visitors will not know about the English and German version of my website, if they don’t open the mobile menu first.

It would be nice to display the flags (or just text links) always on a mobile device, right next to the logo. Would that be possible one way or the other?
Or do you know a other/better solution (besides adding the flags somewhere down in the text)?

2 – The code you gave me to align the flags in the main menu works great. However, I know have a lot of this code like this:

#menu-item-2004 img {
vertical-align: sub;
padding-bottom: 2px;
}

#menu-item-2063 img {
vertical-align: sub;
padding-bottom: 2px;
}

#menu-item-2061 img {
vertical-align: sub;
padding-bottom: 2px;
}

#menu-item-2069 img {
vertical-align: sub;
padding-bottom: 2px;
}

#menu-item-2070 img {
vertical-align: sub;
padding-bottom: 2px;
}

#menu-item-2071 img {
vertical-align: sub;
padding-bottom: 2px;
}

#menu-item-2072 img {
vertical-align: sub;
padding-bottom: 2px;
}

Would it be possible to combine the menu-item-numbers into one piece of code?

Thanks again!
Alwin

• This reply was modified 3 years, 2 months ago by Alwin.

Hello Rikrad,

I have added a Widget to the header, which is only displayed at mobile devices.

So please take a look at https://www.option-webdesign.nl on a mobile device, and you can see the header widget with the 2 links “English” and “Deutsch”.

So far so good, almost there, but only this header widget is to big. I can not find the css to edit the header widget only, and make it smaller (like just 50px height for example).

How can I do that, is that possible?

Thanks!
Alwin

Another question about adding the flag symbols to my header menu:

I have noticed that the loading time for https://www.option-webdesign.nl can be slow now and then. Testing in GTmetrix show me that the 2 flag symbols in the header are responsible for the slow loading times. I see that both flag symbols are redirected with a 301 redirect which is causing the longer loading times.

I have used this settings in Menu Navigation Label fields:

– Why is there a 301 redirect happening to display the flag symbols in the header? Is this normal or not and can Ido something about it to get rid of the redirection so it will load faster?

Thank you very much!

Alwin

Hello Rikard,

You got me on the right track to solve this :)

I had a a double comma character at the end of the image URL’s I used in the Menu Navigation Label fields. I deleted the comma character and now there are no 301 redirects anymore!

Thanks :)
Alwin