Header Nav with Graphics in Dropdown

[bartenderonduty]

Hi Themeco Team,

Hopefully this is a quick question… Is there a way to build a more robust header nav with a sub menu that has graphics and spans the width of the browser window, like in the example below?

I’ve been testing various settings in the Pro header builder, but can’t seem to create a similar layout.

Can you help?

[ruenel]

Hello @bartenderonduty,

Thanks for writing in!

You can use the MegaMenu element. Check out this documentation first:

• https://theme.co/docs/mega-menu

You might as well check this video:

How to Build Mega Menus in WordPress

Best Regards.

[bartenderonduty]

Ah yes, this is exactly what I was looking for! I apologize for missing this in my search.

I have a couple of questions that weren’t covered in the article or video:

1. How do I make the dropdown span 100% the width of the browser window and below the nav bar container? When I set the width/min-width to 100%, the dropdown only spans to the left and breaks the layout. And it’s currently sitting on top of the nav bar.

2. I set the Mega Menu button to text instead of an image. Is it possible to make that text a hyperlink as well?

Thanks again!

[ruenel]

Hello @bartenderonduty,

Thanks for writing in!

1.) You will need to set the width, minimum width and maximum width to 100vw.

And then check out this old thread to use the given CSS to make it fullwidth:

• Full width Mega menu - Support - Themeco Forum

2.) The text will only be used as a Toggle text. You cannot insert a link to it.

Kindly let us know how it goes.

[bartenderonduty]

Thank you @ruenel!

[prakash_s]

Hello @bartenderonduty,

Glad that @ruenel was able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

[bartenderonduty]

Hey guys, I actually had one more question that wasn’t answered above… Without adding padding or margin (which expands the clickable area) how can I get the dropdown to sit below the header bar where I have the red line drawn on the screenshot? It’s currently sitting below the text link so it’s partially covering the logo when opened.

Thanks again!

[christian]

Hey @bartenderonduty,

Try setting the Height of the Toggle to 100%. Make sure your Bar and Container does not have top and bottom paddings.

Hope that helps.

[bartenderonduty]

Thank you for your help!

[marc_a]

Hey @bartenderonduty,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.