Mega Menu Columns

Balness · July 2019

Hi,

I have 3 questions regarding the Menu.

1. how can i have 2 columns inside a mega menu sub item? Like you have on your "shortcodes - typography" section.

2. can a mega menu have more than 3 levels? I was not able to do it.

3. how to change font size of mega menu items? like you have on your site (ex: under typography, all sub-items are smaller)

Thank you in advance

Pablo · August 2019

Hello,

Please check the documentation of the mega-menu feature.

https://themes.muffingroup.com/betheme/documentation/#mega-menu

1) When your main menu item is ready we can get to creating the mega menu
columns, to do that just add another custom link, again with the "#" as
the link and in the link text field type a "-".

2) No, it's only two leveled menu.

It's not possible to extend it.

3) It's the same as the content font size.

If you would like to change the size only for the menu, you have to use the Custom CSS code.

Thanks

Balness · August 2019

Hello and thank you for your reply.

1) I read the documentation and I can create mega menu columns. But, as you have in your menu, inside typography section you have 2 columns, without vertical line separating. And that I'm not able to do. I hope I have explained correctly this time. I'm linking an image.

https://prnt.sc/omx7vh

3) Can you provide that Custom CSS code?

Thanks!

Pablo · August 2019

1) It will look a little bit different, because we customized it a lot with a custom css code, so it will not be exactly the same.

But, I've created the mega-menu and there is no vertical line which is separating

http://prntscr.com/omy0iw

http://prntscr.com/omy1bg

3) Sure, paste that code into the Theme Options > Custom CSS & JS > CSS

.mfn-megamenu li{
  font-size:12px !important;
}

Thanks

Balness · August 2019

Thank you once again for your quick response.

Number 3 is solved, thanks

Regarding number 1, the things is, in the example I showed you, you have 2 columns inside the same sub item. You have no vertical lines because you are using the default style. I want to be able to have 2 columns of items inside 1 sub item. And you showed me 2 columns because you used 2 sub items.

Thank you once again!

Pablo · August 2019

As I said, on our splash page there was a lot of Custom CSS applied and that could be one of them.

Also, there is no vertical line (http://prntscr.com/ondc4s), only on the last item in first column.

Please show me it on your website.

Thanks

Balness · August 2019

Hello,

it seems you are not understanding my question. Maybe it's custom CSS, yes. But can you provide it just for this little thing?

https://prnt.sc/onexwz

That is my provisional menu. Inside of sub-item 1, I want to have 2/3 columns of items. Because I will have around 30 items there.

I want it to be something like this: https://prnt.sc/onf025

Thanks

Pablo · August 2019

I do understand.

You cannot do it like that exactly, more amount of items below the "-" will make the height bigger - it will not break to another line.

And every "-" is new column.

You have big amount of space like that, because I made that CSS for you which made your font smaller. By the default it would be filled with text.

About the CSS:

We do help with Custom CSS, of course - but only with little tweaks(like hiding some elements, changing colors) - but this one, will require not only the CSS changes, but HTML changes of theme files.

So if you want to modify the files and don't know how, you should contact your web developer.

I suggest you, to make it as I showed you on the screenshot on my previous replies, it will be
closer to effect you want to achieve without touching the theme files.

Of course, if you will like to remove the vertical lines there or make some small css changes, I'll help you with this.

Thanks

Balness · August 2019

Hello,

in that screenshot I had still not placed the custom CSS, font is still default. I created a class to make it 3 columns and even though it worked on the menu, it would disrupt the header completely.

The closest I can get to what i want is this: https://prnt.sc/ont3p1

And this is how I did it: https://prnt.sc/ont3wf

Is it possible just to remove the first 2 vertical lines? If not, a custom CSS to remove them all, it would still do.

For questions regarding other subjects, can I still use this topic or is it better to create a new one?

Thank you once again!

Pablo · August 2019

Sure, can you send me a link to your website?

It will be really helpful for us.

Thanks

Balness · August 2019

Hello,

it's still localhost...

Thank you!

Pablo · August 2019

Can you reach me when your website will be live?

We always make the CSS codes on the customer's websites to be 100% sure that they will work.

Thanks

Mega Menu Columns

Comments