Customizing navigation sub-menu

Hi, all. I’m working with a BB child theme plus a standard version of the BB plugin, and I cannot seem to find where to customize the drop down sub-menu for a centered navigation [header] menu.

Can you please tell me where to customize things such as background, text/link color and such for the sub-menu? Thanks, much!

Regards,
John

Hey John,

The options you mention aren’t part of the theme customizer, they would have to be accomplished with custom CSS. The class you’ll need to get you started there is .fl-page-nav ul.sub-menu. Hope that helps!

Best,
Billy

Thanks, Billy. As always, that’s exactly what I needed to know. Awesome product, awesome support–you guys rock. Keep up the great work!

John

My pleasure, John, thanks!

Would be great to have this added in to customize. As well as the sub-menu text colour.

Hi, just curious if this is still the case. In the Customizer there is no way to change the background of, say the current page in the menu or the background of the sub-menu? Like the Beaver Builder site menu where the Get It Now looks like a button. How would I go about doing that?

Hi Lester,

There is no option to style individual menu items in the BB Theme. However, you can do this using custom CSS.

  1. You will want to give that menu item a custom class. You can do this by navigating to WordPress Admin Dashboard > Appearance > Menu. Then click “Screen Options” and check the “CSS Classes” option.

  2. Then click on the menu item you want to turn into a button and give it a class name. For example my-nav-btn and save the changes.

  3. Then you will want to add the following CSS to your custom CSS.

.fl-page-header .fl-page-nav-wrap .navbar-nav > li.my-nav-btn > a {
  background-color: #f00;
  border-radius: 4px;
  color: #fff;
  padding: 5px 16px !important;
}
.fl-page-header.fl-page-nav-wrap .navbar-nav > li.my-nav-btn > a:hover {
  background-color: #0f0;
  color: #fff;
}

You will want to change the values to get your desired look.

Thanks,
Danny