Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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

    #1315986

    Hey 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,
    Ismael

    #1316660

    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

    #1316802

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

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

    Best regards,
    Rikard

    #1316808

    That worked great; thank you Rikard!

    Alwin

    #1316909

    Hi 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,
    Rikard

    #1316981

    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, 3 months ago by Alwin.
    #1317079

    Hi,

    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,
    Rikard

    #1317166

    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

    #1317265

    Hi,

    Please try this CSS as well:

    #text-5 {
        padding: 0;
    }
    
    #text-5 p {
        margin: 0;
    }

    Best regards,
    Rikard

    #1325568

    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

    #1325662

    Hi,

    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,
    Rikard

    #1326157

    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

    #1326174

    Hi,
    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

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Adding a Flag symbol to the main menu?’ is closed to new replies.