Archived topic
Image on item using mega menu
11 replies · Started by Cooperativa CERTAJA Desenvolvimento on June 12, 2021
Generatepress Theme 3.0.3
GP Premium: 2.0.2
I am using mega menu and would like to use an image in one of the menu items.
I managed to put it using HTML, it was good. But would you like to know how to remove the padding so that the image occupies the entire width of the menu?
On the link below you can see my need:
https://www.lojasgraca.com.br/screenshot_24.jpg
Obs.: I want to apply the possible CSS only on the image item, preserving the style of the rest.
Thanks.
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Ok. Tanks.
The login link doesn't work for me:
https://www.screencast.com/t/SjFoTUvE68
Hi,
Try again please, tanks!
Hi Tiago,
I'm seeing the same thing as Leo's.
If you could temporarily disable the site's maintenance mode, we won't need to log in.
We only need to inspect the menu to check the appropriate CSS selector to target only the image you've added as a menu item.
Let us know. :)
OK,
Maintenance mode is temporarily disabled.
Thanks for the feedback.
OK,
Maintenance mode is temporarily disabled.
Thanks for the feedback.
You can try adding this CSS:
.main-navigation ul li.menu-item-772 > a {
padding: 0 !important;
}It removes the padding specifically for the menu item containing the image.
Worked perfectly! Thanks.
Would you like to know if you have a link to a CSS assigned to the field? Or is it only possible using the item ID as in the example shown?
Would you like to know if you have a link to a CSS assigned to the field? Or is it only possible using the item ID as in the example shown?
I'm not sure I understand what you mean. do you mean to style a menu item depending on what link it points to?
If so, you can use <a> tag's href attribute as a selector if you want. See how it's done here - https://www.w3schools.com/css/css_attribute_selectors.asp
ok, tanks!
No problem. :D
