-
AuthorPosts
-
January 20, 2022 at 10:25 pm #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!
January 21, 2022 at 2:14 am #1336447Hi JoStudio, I’ve seen a similar question here:
https://kriesi.at/support/topic/image-in-menu-item/
See if that helps…
Bye!
A.-- This reply was modified 2 years, 10 months ago by mistermagoo8691.
January 21, 2022 at 7:28 am #1336481January 21, 2022 at 10:53 am #1336518Hi 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;
}January 21, 2022 at 12:11 pm #1336527Hi,
The image in private doesn’t load on my end, please check and verify with a working image.
Best regards,
RikardJanuary 21, 2022 at 2:39 pm #1336546Hi 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;
}January 22, 2022 at 4:53 am #1336601Hi,
There’s no menu item with the menu-item-2 ID, which element do you want to apply it to?
Best regards,
RikardJanuary 22, 2022 at 11:08 am #1336626Hi 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?January 22, 2022 at 12:55 pm #1336643Hi,
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,
RikardJanuary 22, 2022 at 1:01 pm #1336645Hi 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, JolandaJanuary 22, 2022 at 2:54 pm #1336658Hi,
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,
RikardJanuary 23, 2022 at 11:20 am #1336723Hi 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, JolandaJanuary 24, 2022 at 4:28 am #1336812Hi,
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,
IsmaelJanuary 24, 2022 at 10:33 am #1336859Thanks 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 JolandaJanuary 24, 2022 at 11:36 am #1336870Hi,
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,
RikardJanuary 24, 2022 at 11:41 am #1336872Rikard 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, JolandaJanuary 24, 2022 at 11:51 am #1336876Hi,
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,
RikardJanuary 24, 2022 at 11:56 am #1336878Hi 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!January 24, 2022 at 1:01 pm #1336891Hi,
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 -
AuthorPosts
- 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.