Tagged: main-menu
-
AuthorPosts
-
August 9, 2021 at 12:29 pm #1315833
Hello,
I like to know if it is possible to add a Flag symbol in the main menu, as if it would be a social icon?
How can I do that?
Thank you for your help :)
Alwin
August 10, 2021 at 8:31 am #1315986Hey Alwin,
Thank you for the inquiry.
You can add a Custom Link and use an img tag in the Navigation Label field.
// https://codex.wordpress.org/WordPress_Menu_User_Guide#Adding_Items_to_a_Menu
Best regards,
IsmaelAugust 13, 2021 at 5:37 pm #1316660Hello 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,
AlwinAugust 15, 2021 at 12:16 pm #1316802Hi,
Please try the following in Quick CSS under Enfold->General Styling:
#menu-item-2004 img { vertical-align: sub; padding-bottom: 2px; }
Best regards,
RikardAugust 15, 2021 at 1:35 pm #1316808That worked great; thank you Rikard!
Alwin
August 16, 2021 at 8:17 am #1316909Hi Alwin,
Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardAugust 16, 2021 at 4:23 pm #1316981Two 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, 3 months ago by Alwin.
August 17, 2021 at 6:23 am #1317079Hi,
1. You could add the flag to a widget: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
2. You can combine that CSS like this:
#menu-item-2004 img, #menu-item-2063 img { vertical-align: sub; padding-bottom: 2px; }
Just repeat the same structure for all the instances. If you want to learn basic CSS, then I can recommend this site: https://www.w3schools.com/
Best regards,
RikardAugust 17, 2021 at 2:08 pm #1317166Hello 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!
AlwinAugust 18, 2021 at 6:29 am #1317265Hi,
Please try this CSS as well:
#text-5 { padding: 0; } #text-5 p { margin: 0; }
Best regards,
RikardOctober 19, 2021 at 1:24 pm #1325568Another 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
October 20, 2021 at 5:31 am #1325662Hi,
It looks like there are extra characters added after the file format, please see private. Could you check the image URLs so that they don’t contain any characters which should not be there?
Best regards,
RikardOctober 23, 2021 at 11:58 am #1326157Hello 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 :)
AlwinOctober 23, 2021 at 7:54 pm #1326174Hi,
Glad Rikard could help you get this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Adding a Flag symbol to the main menu?’ is closed to new replies.