Customizing Menu

I need help in customizing the following areas:

  1. menu padding and spacing
  2. sub menu, text-transform, color and hover
  3. active menu item whether in main or sub menu

I have used the classes provided and cant seem to get it right, when i remove the css from the code the old changes wont roll back either ???

http://www.pictogram.co.za/synout/

ps would love to have an editable block in the top right of the header too.

[Content Hidden]

Hi Geofrrey,

Here are the CSS classes you need to target:

Adjusting main menu padding and spacing
.container .fl-page-nav .navbar-nav > li > a {
}
Adjusting the submenus
.container .fl-page-nav ul.sub-menu li a {
}
Adjusting the submenus' hover
.container .fl-page-nav ul.sub-menu li a:hover {
}
Adjusting the active menu
header .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a,
header .fl-page-nav-wrap .navbar-nav > li.current-menu-ancestor > a,
header .fl-page-nav ul.sub-menu li.current-menu-ancestor > a,
header .fl-page-nav ul ul.sub-menu li.current-menu-item a {
}

I did try to implement those via your style.css file but the changes indeed didn’t show up. I cleared the Beaver Builder cache but to no avail. It’s quite possible the site is being cached at the server level. You can, however, place the CSS lines to the Beaver Builder theme customizer under Code -> CSS Code which should work with no problems.

Ben

Code -> CSS Code option worked beautifully, you are awesome. Will send the link to the website once full completed.

Question are you guys thinking of adding more options to the nav section in the future, so one could customize these aspects without css ? If not i think it would be really awesome to move the custom code css box to the front end on each page as part of the page builder.

Nice work, Ben, glad it worked for you Geoffrey! We’re always looking at ways of improving on our products, but you are welcome to add feature requests to our User Voice forum which we review often when shaping our roadmap!

Best,
Billy