WordPress menu formatting and menu behavior

I am using the Beaver Builder theme and Beaver Builder plugin.

* Where do i format the WordPress menu background colors (regular, link, hover)
* I have standard WordPress menu defined in my Header. When i reduce the screen size in my browser or view the site on a mobile device, the menu does not overlay what is below the header and the menu is obscured by that data.
* What should the correct menu behavior be?
* 	* overlay the content
	* force the content down
	* something else

As an aside, when i use the Beaver Builder menu module, the menu forces the content down.

Thank you for your help,
Steve

Hey Steve,

Welcome to the BB forums! :slight_smile:

  • These can be found under Theme Customizer > Header > Nav Style. You can only change the Link Color and Hover Color though, no background colors for individual menu items.
  • Not really sure what you mean here. The menu should push the content down when clicked on mobile. Do you have a screenshot of this happening? You can upload and post it here via imgur.
  • Our site is from the BB theme and plugin. Check screenshot.
  • http://imgur.com/tQllRyK

Not really sure what you meant by the last one as well. I tried it on my local dev and it works just fine, i.e., not pushing the content down when the submenu appears. Do you have a screenshot of this happening? Better yet, can you share the URL of the site you are working on so we can take a look?

Ben

Hi Ben,
Thank you for the quick reply!

I found the menu customizer code. I set the hover to a wierd color see screenshot but it seems to have no effect on the actual menu.

What is the background color parameter for at the top of the configuration menu (same screenshot)?

Here is a link to the site. Note that the menu expands correctly when the browser is in full screen. However if you resize the width of the browser the menu is hidden behind the top graphic.

Edited to say: Chrome seems more forgiving than Firefox at medium widths (Chrome works). But neither works at a narrow width. Also, the menu does not work on my iPhone 6.

Thank you!
Steve

Hi Ben,

More information: the error only occurs if the window is small enough to collapse the full menu to the Menu button. Then when you click on the Menu button the menu does not push down the content and the menu background becomes transparent.

Currently the Products item is the only item with submenu items.

Thanks,
Steve

Hey Steve,

The problem with the mobile menu is caused by this Custom CSS you have.

.fl-page-header-container {
  height:140px;
}

Removing that should fix you right up!

The background color only works for Nav Bottom and Nav Centered. I believe you are running WP 4.3. They have a bug in the Customizer section where items that are supposedly hidden shows up.

Not really sure why the Hover color isn’t reflecting. Do you mind sharing temp admin access to the site so we can check? You can use the private reply option below.

Ben

[Content Hidden]

Hey Steve,

Regarding the hover color, that’s actually because you are using the Nav Right layout. For that specific layout, the Nav Color is being taken from Theme Customizer > Header > Header Style. You’ll have to adjust the settings there. Sorry, it’s because of the WP4.3 Core bug that you’re seeing all those options when you shouldn’t.

Ben

Ben,

Thank you so much. It would have taken me days (or more) to figure this out. You’re the best!

Steve

Hi Ben,

Why does the menu expansion only work correctly when i use the nav center option? Also, per your suggestion above for styling the right menu, the style is missing a choice (it has link and hover but not the original text color as the center menu does.)

for my design i need a nav right, the expansion to work properly AND i need a sticky header so i don’t think using the new Menu module with CSS positioning would work.

Thanks
Steve

Hey Steve,

The Nav Centered and Nav Bottom layout has its menu separate from the header so we made a separate styling set for each. The Nav Right layout has its menu in the header so we didn’t need a separate styling for it. What style choice is missing? You should have Header Text Color there which should set the colors for non-links. Again, I’m really sorry if having all the options shown is bugging you. It’s a bug with the WP 4.3 Core and they’re working on it.

Ben