Primary menu items center align

Hi Albert,

Thanks for posting a link.

Try setting the top and bottom padding back to 0px, and the Menu Height to 66px.

Thanks for your help, we’re almost there! I’m using Max Mega Menu in conjunction with a DIVI theme. I can not figure out how to remove the space above the menu items to center them and how to avoid the menu bar from growing when scrolling down…

Hi Albert,

Looking at this article:

https://divibooster.com/stop-the-divi-header-from-shrinking-on-scroll/

This can be done with the following customizer settings:

Header & Navigation ? Primary Menu Bar ? Menu Height

Header & Navigation ? Fixed Navigation Settings ? Fixed Menu Height

.. what happens if you set these both to 66px?

Bingo! i managed to get the total height of 80 pixels by adjusting the values of the Header & Navigation of divi to 50 px and the Menu Bar ? Menu height to 30px. Now the menu items are centered ?? Two more things left to get it: How to move the whole panel down so the top border aligns to the bottom line of the menu bar… I’m missing a “Panel margin” feature?

And the second is: I have a mega menu item set to Standard Layout. It contains certain pages added. Is there any way to remove the title “pages” from the header of the submenu pages list?

I really appreciate tour help, thanks.

Hi Albert,

For the menu to line up with the bottom of your header, you need to make it so the header and menu does not have any padding.

Please try adding this under Appearance > Customize > Additional CSS:

.et_header_style_left #et-top-navigation {
    padding-top: 0 !important;
}

Then remove the padding from the menu (under Mega Menu > Menu Themes), and use the Menu Height option to set the overall height of your header.

Thanks again, that worked OK! only one thing left:

I have a mega menu item set to Standard Layout. It contains certain pages added. Is there any way to remove the title “pages” from the header of the submenu pages list?

Hi Albert,

Can you edit the widget (in the mega menu builder) and remove the title “PáGINAS”? Or does it come back automatically?

Hi, yes, although I remove the title in the mega menu builder:

https://www.dropbox.com/s/0tqbi6w0n54jjhd/title.jpg?dl=0

It appears at the head of the page list:

https://www.dropbox.com/s/2f7ekkwcie4jgu6/paginas.jpg?dl=0

Thanks in advance!

Hi Albert,

Thanks for the screenshots. Some widgets default to a certain title.

Please try adding this to Appearance > Customize > Additional CSS:

#mega-menu-item-pages-4 h4.mega-block-title {
  display: none !important;
}

Thanks again, that CSS works perfectly when the menu item is a page. If it is a custom link the title appears again.

Hi Albert,

Try:

h4.mega-block-title {
  display: none !important;
}

That will hide all of the headers from all of your sub menus.

Thanks. Sorry for being so pesky, but is there any CSS that hides the headers when there is only one column in the submenu and shows it in case of two?

Thanks!

Hi Albert,

In that case you’d need to follow this format of CSS instead:

#mega-menu-item-pages-4 h4.mega-block-title {
  display: none !important;
}

.. which targets an individual title (in this case, the title within the element with the ID “mega-menu-item-pages-4”), and repeat it for the other titles that you need to hide. You’d need to view the page source to work out which ID’s to use in the CSS selector to target the title you want to hide.

• This reply was modified 6 years, 4 months ago by megamenu.