Full width dropdown in nav

Support
#1

Hello, I am attempting to create a navbar with a dropdown section that runs the full width of the page. I am having a tough time figuring out how to do this using x pro.

Any ideas? I have a test version of the bar i am creating on this page: http://mdsfnet.wpengine.com/house-calls-2/
I want the hamburger on the second nav bar to open a full-width dropdown menu

edit:
Another solution that I have been unable to figure out would be if I could have an entire third bar that appears/disappears on a toggle from the second bar. would this be possible instead?

#2

Hi There,

Thank you for writing in, regretfully inline drop-down navigation is still not possible with header builder. The closest you can get to that is the Content Area Modal but you need to manually write the markup of your menu and it will cover the entire screen.

Standard Header has the Megamenus feature which might be the one you need.

Cheers!

#3

Thank you for the response. It would be extremely useful if this feature was included in the header builder, considering mega-menus are becoming more and more common.

I think the Content Area Modal would be a good solution, however, I am having a hard time styling it as I need. I need the modal to consistently pop up in the same position on the page, directly underneath the nav bar. However I cannot seem to get the modal to appear anywhere other than the bottom of the page or in a fixed position on screen using different “position” values.

This is a mockup of what I am attempting to create using X Pro to give you a better idea.

Cheers!

#4

Hello There,

Thank you for the clarifications. I would not recommend using Content Modal Area because it is not design to do what you have wanted. You cannot predict where it would displays and it would create conflicts and issues with different browser screens.

The best solution is to make use of Ubermenu instead since mega menus is not yet supported in the custom header. You may install Ubermenu by going to X > Overview > Extensions. To know more about this plugin, please check this out:

You may also need to check this:

Hope this helps.

#5

Thank you much for pointing me in this direction, UberMenu seems to be a great solution.

I am however having one small issue. I cannot find how to change the width of the resized- responsive mobile menu when viewing the menu on smaller screens. I have attmepted adjusting multiple settings that seem to control this in the UberMenu settings, however none of these have made a difference in my mobile menu size. Any ideas?

Here is a screenshot of the issue:

I would like the mobile menu to be much larger, hopefully 80% of the screen, or 600px.

#6

Hi,

Can you provide us your http login in Secure Note so we can take a closer look.

Thanks

#7

no problem, will include in a secure note below

#8

Hi,

To adjust the width, you can add this in Theme Options > CSS

@media(min-width:600px) {
  .ubermenu-nav {
      width:600px;
  }
}

Hope that helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.