Header (logo-menu) width

https://www.dosya.tc/server11/fgsu2g/met.jpg.html

Hi,

? Ok, I’ve fixed it, no problem.
? How do I add an image to the Mega Menu?

Regards

Hello @gokh,

great that you found a solution for your first issue.

Please upload a screenshot where the image in the mega menu should be and describe it a little bit. I can not download from that page you linked, please upload them on an image upload site like imgur and share the link. Maybe also include a link to your website.

Regards,
Terra Themes

Hi Terra,

? When I click on imgur, it says “This site can not be reached”, the site does not open.
The subject of the image is not a problem, I solved it.

Help topic:
? How do I add an image to the Mega Menu?

Regards,

This depends on where your image in the mega menu should be. That’s why I asked for a screenhot where you can paint or explain where the image should be in the mega menu. Then I can provide you some code to implement it.

Hi,

I’m testing the theme. I would like to use Meteorite if there are Mega menu images.

Regards..

https://i.hizliresim.com/76MMMW.jpg

Thank you much for that image.

Please try out this CSS in the Additional CSS section of the WordPress Customizer or your child themes style.css:

#main-nav .mega-menu .sub-menu li:nth-of-type(1) a::before {
  content: "";
  background-image: url('https://YOUR-IMAGE-LINK-HERE');
  display: block;
  padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
  margin: 0 0 20px 0;
}

Keep in mind to add your image links. You can copy and paste that code as many times as you need. Just change the :nth-of-type(1) to the menu item where you want to add the image.

Very good..

Code image you sent.
https://i.hizliresim.com/lOvjPr.jpg

After
https://i.hizliresim.com/Rnok4n.jpg

My css knowledge is minimal, I made mistakes in other image attachments. For example, do you send codes with a few images attached?

Sample image 250x350px
https://i.hizliresim.com/rOZM4V.jpg

Thank you so much..

If you want that sample image for all 8 menu items, you can use this code:

#main-nav .mega-menu .sub-menu li:nth-of-type(1) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  display: block;
  padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(2) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  display: block;
  padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(3) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  display: block;
  padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(4) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  display: block;
  padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(5) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  display: block;
  padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(6) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  display: block;
  padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(7) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  display: block;
  padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(8) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  display: block;
  padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
  margin: 0 0 20px 0;
}

Each CSS rule stands for one menu item. Which item it is, is defined through the number in the lines #main-nav .mega-menu .sub-menu li:nth-of-type(1) a::before { where the 1 stands for the menu item. You can change the image for each menu item if you change the line with the background-image background-image: url('https://i.hizliresim.com/rOZM4V.jpg');.

Hi,

Yes, very well ..

? The image is cropped. Is it possible to reduce the size instead?
? How can I change the “padding-bottom/ padding-bottom” values of the Mega menu panel?

https://i.hizliresim.com/3EYzO0.jpg

Thanks

Please try this code instead:

#main-nav .mega-menu .sub-menu li:nth-of-type(1) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  background-size: cover;
  display: block;
  padding-top: 71.4%;
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(2) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  background-size: cover;
  display: block;
  padding-top: 71.4%;
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(3) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  background-size: cover;
  display: block;
  padding-top: 71.4%;
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(4) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  background-size: cover;
  display: block;
  padding-top: 71.4%;
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(5) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  background-size: cover;
  display: block;
  padding-top: 71.4%;
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(6) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  background-size: cover;
  display: block;
  padding-top: 71.4%;
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(7) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  background-size: cover;
  display: block;
  padding-top: 71.4%;
  margin: 0 0 20px 0;
}
#main-nav .mega-menu .sub-menu li:nth-of-type(8) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  background-size: cover;
  display: block;
  padding-top: 71.4%;
  margin: 0 0 20px 0;
}

To reduce the padding on the bottom use:

#main-nav .mega-menu .sub-menu {
  padding-bottom: 0;
}

Wooww.. ?ok iyi..

How to add images to mobile menu

Thanks

To add them to the mobile menu too add this rule to each block I provided before:

#mobile-menu .mega-menu .sub-menu li:nth-of-type(1) a::before,

so that it looks like that, for example for the first menu item:

#mobile-menu .mega-menu .sub-menu li:nth-of-type(1) a::before,
#main-nav .mega-menu .sub-menu li:nth-of-type(1) a::before {
  content: "";
  background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
  background-size: cover;
  display: block;
  padding-top: 71.4%;
  margin: 0 0 20px 0;
}

All right, thank you ..

You’re welcome.