How to insert different background images to mega menu? - Support

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
August 24, 2015 at 3:11 am #491985

tswilson
Participant

Hi!
I’ve searched up and down the forum but couldn’t find an answer to customize mega menu.
Is it possible to add a different background texture to mega menu? I have designed three different images and would like to insert them as a unique background in the mega menu for 3 different columns.
Thanks.

August 24, 2015 at 7:15 am #492034

Basilis
Inactive Moderator

Hey tswilson!

Can I see your live page please?
Also add your private data to the reply.

Thank a lot

Cheers!
Basilis

August 24, 2015 at 8:17 pm #492477

tswilson
Participant

I uploaded private content. Thank you.

August 25, 2015 at 10:18 am #492745

Rikard
Keymaster

Hi,

I can’t see any private content in any of your replies, could you try posting again please?

Best regards,
Rikard

August 25, 2015 at 7:41 pm #493170

tswilson
Participant

Thank you for letting me know.
I set up my main menu as the mega menu. Is it possible to insert an image (or texture) for the background in the sub menu dropdowns?
Just like on this site. My site is not live yet but I can provide a temporarily private login if needed.

Cheers!

August 27, 2015 at 10:59 am #494017

Andy
Inactive Moderator

Hi!

yes, for this you need to create a mega menu: http://kriesi.at/documentation/enfold/setting-up-your-mega-menu/

Cheers!
Andy

August 27, 2015 at 5:35 pm #494354

tswilson
Participant

Andy,

As I mentioned, I have created a mega menu.

I would like to insert this image for the background in the in the sub menu drop downs. Is this possible?

I found CSS to change the background color, however, I am asking if it is possible to insert an image/texture for a background.

I have sent you information and image links again in the private content area.

Thank you.

August 29, 2015 at 8:29 pm #495365

tswilson
Participant

Hello Team Kriesi,

Since I haven’t heard back from you, should state my question in a different way?

Maybe my terminology is confusing as I am a novice.

Thank you in advance.

September 1, 2015 at 5:14 pm #496565
Elliott
Inactive Moderator
Hi!

Try adding this to your custom CSS.
```
.avia_mega_div .sub-menu { background: url("URL to your image") !important; }
.avia_mega_div li, .avia_mega_div a { background: transparent !important; }
```
I tried logging in but it’s not letting me. Is the information correct?

Best regards,
Elliott
September 4, 2015 at 9:18 pm #498611

tswilson
Participant

Thank you for your help. This is what I got after adding the code:
https://lh6.googleusercontent.com/-_GkLODYF6Z0/VensE9orWXI/AAAAAAAAAFQ/wNEOzXs8Yco/w815-h589-no/Screen%2BShot%2B2015-09-04%2Bat%2B11.59.53%2BAM.png
I am trying to have it look more like this:
https://lh4.googleusercontent.com/-K0BVcMcxKFk/VensEvHJmGI/AAAAAAAAAFM/zcdQqFB5laY/w1310-h830-no/Screen%2BShot%2B2015-09-04%2Bat%2B11.51.00%2BAM%2Bcopy.jpg

I accidentally deleted the user for you to log in with. My apologies. I have made a new log in and included it in the private content.

Is there code to increase the size of the mega menu container in my child theme to fit my background texture (say 1100 pixels or so)?

I am getting close! Thanks again.

September 6, 2015 at 4:15 am #498793
Ismael
Moderator
Hi!

Please try to adjust the code to something like this:
```
.avia_mega_div > .sub-menu {
    background: url("//barkingzebratours.com/new/wp-content/uploads/2015/08/Megamenu_kili-1050.jpg") !important;
    background-size: 100% 100% !important;
}

.avia_mega_div .sub-menu li, .avia_mega_div .sub-menu a, .avia_mega_div > .sub-menu li ul {
    background-color: transparent !important;
}
```
Best regards,
Ismael
September 7, 2015 at 2:39 am #498976

tswilson
Participant

Thank you. We are getting close Ismael.

My background image is 1050 pixels wide by 473 pixels Tall.

Is there a quick CSS that will keep the container that fixed size, so my background image does not resize?

This is how it is looking now:
https://photos.google.com/u/1/photo/AF1QipOKYcSe1VgXM3tunHwLk2Bf9UchHo1k9TLA3G36

This is what we are going for:
https://lh4.googleusercontent.com/-K0BVcMcxKFk/VensEvHJmGI/AAAAAAAAAFM/zcdQqFB5laY/w1310-h830-no/Screen%2BShot%2B2015-09-04%2Bat%2B11.51.00%2BAM%2Bcopy.jpg

Thank you.
Have a great weekend!

September 9, 2015 at 10:18 am #500276
Andy
Inactive Moderator
Hi!

your first link does not work for me. However, just adjust background-size from Ismaels Code:
```
.avia_mega_div > .sub-menu {
    background-size: 1050px 473px !important;
}
```
Cheers!
Andy
- This reply was modified 9 years, 2 months ago by Andy.
September 12, 2015 at 11:38 pm #502178

tswilson
Participant

Andy, hat didn’t seem to work.

September 14, 2015 at 4:48 am #502439
Ismael
Moderator
Hi!

Try this:
```
.avia_mega_div.avia_mega2.six.units {
    min-width: 1050px !important;
    min-height: 473px !important;
}
```
You need to add css media queries to adjust the width and height on smaller screens.

Regards,
Ismael
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.