Mega Menu div styling

[bartenderonduty]

Hey Themeco Team,

I’m trying to style the two divs in the default Mega Menu so the divs are side-by-side (instead of stacked). I tried tweaking a bunch of settings for the menu but haven’t been able to get the divs to align so they’re next to each other on desktop/laptop (and stacked on mobile).

Can you help?

[prakash_s]

Hello @bartenderonduty,

Thanks for writing to us.

In order to align the Mega menu DIV elements side by side, you need to follow these steps.

1. Inspect the Mega menu set Flexbox as Row
   

   

2. You need to set the Mega Menu Flexbox —>Horizontal —>Space Evenly

3. Go to both of the DIV —>Set the Self Flex as Standard

Hope it helps
Thanks

[bartenderonduty]

Thank you!

[ruenel]

You’re welcome.

[bartenderonduty]

Hey Themeco Team,

Got another question I’m hoping you can help with… Is it possible to get the contents in this div element to wrap to a second column and have all the contents inside the mega menu centered?

I’m trying to replicate this look…

Thank you!

[ruenel]

Hello @bartenderonduty,

You can simply add a Row/Column elements inside the current DIV element. You can then place the Negative Offset element inside each of the Columns.

Hope this makes sense.

[bartenderonduty]

Thanks @ruenel. Easy enough.

I have a couple of follow up questions…

1. With the toggle for a single menu, is there a way to switch between text and graphic depending on screen size? Or do I need to create completely separate menus for desktop and mobile in order to achieve this?
   

   
   
   
   

2. Is it possible to upload additional sets of icons and have them appear in the icon picker?
   

   

Thanks again!

[ruenel]

Hello @bartenderonduty,

Thanks for updating in!

1.) Regretfully we do not have an option that you can hide the text or graphic for the toggle. You can both enable it and then use custom CSS to show or hide them instead. Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the toggle menu.

Check out this video demonstration:

Dev Tools demo

Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

2.) What you are seeing are the Font Awesome Icons. We do not have an option that allows you to upload a new set of icons.

Best Regards.

[bartenderonduty]

Thank you @ruenel!

[prakash_s]

Hello @bartenderonduty,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns regarding our theme and theme settings.

Thanks

[bartenderonduty]

Hey Themeco Team,

I’m having issues with styling a Navigation Collapsed element on mobile. The button width is breaking the container. I tried adjusting the width, padding, etc. and can’t seem to get the buttons to stay inside the container.

Can you please make a suggestion on how to resolve this?

[prakash_s]

Hello @bartenderonduty,

In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot a few common issues before we investigate your settings.

• WordPress Login URL
• Admin level username and password
• Exact Page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[bartenderonduty]

Done—thank you!

[ruenel]

Hello @bartenderonduty,

Your width is 100vw which means that whatever is the browser width, it will also be how wide your menu is. It is best you set a 100% maximum width so that the width of the menu items will be as wide as its container.

Best Regards.

[bartenderonduty]

Thank you. I really appreciate your help!

[tristup]

Hi @bartenderonduty,

Glad that we are able to help you.

Thanks