Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1336440

    Hi there,
    I searched and tried different things but I cannot find what I’m looking for…
    How do I add an image (instead of a text) to the main menu that links to a page?
    See the link below.
    It’s a dutch website with only one english page (so therefor I don’t use the WPML-plugin).
    In the 3rd column in the footer I placed an image of an English flag. What I want, is the same image next to the menu item ‘Contact’ but I cannot manage it…

    I hope you can help me!

    #1336447

    Hi JoStudio, I’ve seen a similar question here:

    https://kriesi.at/support/topic/image-in-menu-item/

    See if that helps…
    Bye!
    A.-

    #1336481

    Hi,

    Thanks for helping out @mistermagoo8691 :-)

    Best regards,
    Rikard

    #1336518

    Hi mistermagoo8691 and Rikard,

    Thanks for your help!
    But unfortunately it doesn’t work. Maybe because I don’t understand it completely :-(
    What I did: I copied the code below and changed the image-url.
    Also I changed the menu-item, and than placed the code in the Theme General Styling.
    But it doesn’t work.
    Please help me what to do now?
    ————
    li#menu-item-2935 {
    background-image: url(https://www.solveigmalvik.com/wp-content/uploads/2014/09/Danish-flag-300×171.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    }
    li#menu-item-2935 a {
    opacity: 0;
    }

    #1336527

    Hi,

    The image in private doesn’t load on my end, please check and verify with a working image.

    Best regards,
    Rikard

    #1336546

    Hi Rikard,
    That’s not my website, but the one from the older tickets. Look, this is my code I placed in the Them options. On my website you can see the same image in the footer (the english flag).
    http://www.off-thegrid.nl is the website (not the Danish one)

    }
    li#menu-item-2 {
    height: 15px;
    background-image: url(https://www.off-thegrid.nl/wp-content/uploads/engels-vlaggetje_80px.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    }
    li#menu-item-2 a {
    opacity: 0;
    }

    #1336601

    Hi,

    There’s no menu item with the menu-item-2 ID, which element do you want to apply it to?

    Best regards,
    Rikard

    #1336626

    Hi Rikard,
    I want the image of the english flag to be seen next to the last menu item Contact. And when you click on the image, you must go to the english page:

    I searched how to find out what my menu-itemnumber is. See the private content.
    What am I doing wrong?

    #1336643

    Hi,

    Thanks for the clarification. I’ve added a new menu item for you, and the CSS is placed in Quick CSS. Please review your site.

    Best regards,
    Rikard

    #1336645

    Hi Rikard,
    Wauw, thanks a lot!
    The only thing now, is that the image is twice so big as I want, is there a way to change it?
    Or should I make a smaller image and then place that one in the code in the Quick CSS. What is the best solution?
    Best regards, Jolanda

    #1336658

    Hi,

    Please try to download the image in question and scale it down in software like Photoshop or similar, then upload it again and change the image URL in the CSS as well. The image is 80 pixels wide now, so half of that should like achieve what you are looking for.

    Best regards,
    Rikard

    #1336723

    Hi Rikard,
    I upload a 40 px. image and change the image url also in the CSS.
    But the big image is still there. Can you please help me one more time? (I hope for the last time for this!)
    Kind regards, Jolanda

    #1336812

    Hi,

    Thank you for the update.

    You can manually define the size of the menu item background with the following css code.

    li#menu-item-1464 {
        background-size: 40px;
    }
    

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    #1336859

    Thanks Ismael for your answer
    I add your code (with the right menu-item) to the quick CSS, but it didn’t make the flag smaller…
    Can you please take a look, what am I doing wrong?
    I send you the data in the private content.
    Kind regards Jolanda

    #1336870

    Hi,

    I’ve adjusted the CSS I sent previously with the suggestion from Ismael added to it, and it’s working as expected. Please review your site.

    Best regards,
    Rikard

    #1336872

    Rikard thank you so much for your help; this is exactly what I want :-)))!
    What did I do wrong? I don’t understand it.
    But you both helped me very gooed, thanks a lot!!!
    Kind regards, Jolanda

    #1336876

    Hi,

    The CSS which Ismael posted was not applying, I simply added it to the block of CSS that I added for you previously. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1336878

    Hi Rikard,
    I still don’t understand it completely (unfortunatly I’m not a html-code-expert:-( ), but the most important thing is: IT WORKS PERFECT!
    So yes, you can close the topic.
    Again thanks a lot!

    #1336891

    Hi,

    Ok great, I’m glad that we could help you out. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘How do I add an image instead of a text to the main menu that links to a page?’ is closed to new replies.