Problem with menu bar height

  • Resolved cmjornalismo

    (@cmjornalismo)


    4 years, 7 months ago

    Hi, there!

    First of all, thanks for this great plugin ??

    I’m having problems with the menu bar height and was wondering if you guys could help me out.

    The theme I’m using (Ascend Premium from Kadence Themes) requires me to choose a height for my header, and the minimum is 40px. I’ve set it to 84px. I’ve then set the Menu Bar height to the same 84px. In my 1280px screen, it opens perfectly.

    BUT when the screen width is a bit smaller, say 1200px, the menu breaks in two lines, the Menu Bar height increases and starts overlapping with the Topbar. Only the Menu Bar, not the whole header. The logo remains aligned, limited to the header’s height.

    To fix that, I have to set the Menu Bar height to 0px. Then there’s no overlapping with the Top Bar on smaller screens. The menu breaks perfectly in two lines, aligned with the logo and contained in the height set to the header.

    But when I do that it messes up with the Mega Menu. Since the Menu Bar height is set to 0px, when the Mega Menu opens its background covers the menu itens on the Menu Bar. You can’t read the Menu Itens or click on them because the Mega Menu covers them.

    I’ve tried different things, like trying to adjust padding, changing the Z-Index, setting different header heights, different Menu Bar heights etc, but nothing worked. Is this an unsolvable incompatibility between the Menu and my theme’s header? Or is there a workaround to it?

    Thanks a lot ??

    Carolina

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi Carolina,

    Thanks for posting a link. You’ll definitely want to set the menu height to something other than 0px, so keep it as 84px.

    Your theme switches to a mobile view at 992px, so set the Responsive Breakpoint to 992px also.

    The problem you have then is that the menu items start wrapping onto 2 lines between 1104px and 992px (the breakpoint). There are multiple ways to work around that, please see this page for some ideas:

    https://www.megamenu.com/documentation/menu-items-wrapping-two-lines/

    Regards,
    Tom

    Thread Starter cmjornalismo

    (@cmjornalismo)

    Hi Tom,

    thank you! I’ve followed the instructions to reduce the font size for smaller screens and it worked perfectly ??

    Thanks again!
    Carolina

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Problem with menu bar height’ is closed to new replies.