Mega Menu

[alexanderchristiansen]

Hi there guys!
In regards to the Mega Menu. On swiftideas.com you have made the “demo” in the menu showing images and the link below.
When I use the mega menu on our site it shows the link on top of the image.
How can I change this?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Locate the setting: Hide Mega Menu Headings within the menu item:

[alexanderchristiansen]

Hi David,
Thanks! 🙂

Follow up question.
So I would like to style the background color of the mega menu using this:

nav .menu ul.sub-menu, li.menu-item.sf-mega-menu>ul.sub-menu>div {
    background-color:#1b2946;
}

But.. this affects my dropdown on ‘cart’ and ‘my account’ as well. And I would of course only like this to affect the menu items in my primarary menu.
I tried to show you the examples in the photos attached.
Overall I would like to style the element of the dropdown on the menu without affecting the cart-dropdown and my-account.

Looking very much forward hearing from you.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Use only this part

 .menu-item.sf-mega-menu>ul.sub-menu>div {
    background-color:#1b2946;
}

-Rui

[alexanderchristiansen]

Hi Rui Thanks!
The same goes for the Menu-items (being the actual links)
So i.e. if you look at the photo above the “SHOP ORGANIC” has be another color and font-family as the “dropdown”-menu dropping from the “MY ACCOUNT” and “CART”

[alexanderchristiansen]

Hi Rui,
The prior snippet doesn’t seem to work – unfortunately.
Site: http://organicbasics.staging.wpengine.com/

[Jamison64]

Hello,

I have also setup icons within the Mega Menu but as there are +20, the viewer can’t scroll down to see the last icon/btn (please see attached). If I could edit the padding/margin of the css I could remedy it.

Could you please point me in the right direction of which style I need to edit ?

many thanks
regards
Jim

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

@Jamison64
Can you open your own topic or this will be confuse. We will reply you there.
We will need your site url to inspect.
Thanks

@alexanderchristiansen
It seems fine to me, can you try to clear the browser cache.
https://www.dropbox.com/s/3tiwnvdr5jljk3x/Screenshot%202017-02-06%2010.29.33.png?dl=0

-Rui

[alexanderchristiansen]

Hi Rui,
Yeah I somehow got controle of background of the menu. But you can see that there is white background on the text area. I can’t seem to change this without conflicting with the dropdown of the cart / my account.

Further I can’t seem to change the font / style of the menu items (mega menu) without conflicting with myaccount and cart dropdown.

Attachments:

You must be logged in to view attached files.

[Jamison64]

Ok will do. Apologies

[alexanderchristiansen]

So basically I add:

nav .menu ul.sub-menu li.menu-item > a, nav .menu ul.sub-menu li > span, nav.std-menu ul.sub-menu
background-color:red;

And both my Mega Menu item will be red – but unfortunately also my MyAccount and Cart-dropdown.
So I only want to style the text on the megamenu – being the menu with the blue background 🙂

Attachments:

You must be logged in to view attached files.

[alexanderchristiansen]

Further I can’t seem to color the “background” of the text-area without conflicting with the cart-dropdown and the my-account dropdown.

See the yellow on the dropdown.

Attachments:

You must be logged in to view attached files.

[alexanderchristiansen]

Yes!
I got very far myself!
I choose to write in a class in the menu-name through appearance -> menu.

Last question.
Can I adjust the padding between the mega-menu items?
As shown in the photos below – I made a mockup whereas the columns has less padding. Can you help me on that one?

organicbasics.staging.wpengine.com

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Yes, you can using this:

li.sf-menu-item-html {
    padding: 0px!important;
}

The items are 25% width though, so the padding is within that container.

[alexanderchristiansen]

Hi David,
I added it but it only changed the padding on the top and bottom. See photo.
If I change it to:
padding-left:0px!important;
padding-right:0px!important;
Nothing seems to change.

Attachments:

You must be logged in to view attached files.