Vertical Menu Issues

BB Theme
1

I could use some help to understand the vertical menu in the new version of the BB theme. I have v 1.5 installed. I would love to use it for the next version of our website but having issues on my development site.

Please see http://optiformsinc.com/

To get this look I created a new menu with submenu items for many of the top level categories. In WP admin, I went to Customizing > Header > Header Layout and changed Layout to Nav Vertical Left, kept the width at 230 and changed the padding to 10. Then I went to Customizing > Header > Header Style, changed the background color to a dark grey and the text color to white. That’s it.

Question 1 – Why is the logo so small? This logo is 250 x 60 and displays properly on http://www.optiforms.com/. When I go to Header Logo and change logo type to “text”, the texts breaks to a second line. It’s as if the container is super small.

Question 2 – Why are the navigation links center aligned? Shouldn’t they be left aligned? In Nav Layout, the option for Nav Item Align is set to Left, so not sure what’s happening.

Question 3 – Why do the submenu items appear in a free floating box to the right of the main nav covering up the main content instead of underneath the menu in a coherent menu system? Also, if you move too slow from the main nav to the free floating submenu window, that submenu window disappears. Not good.

Question 4 - Why aren’t there options for arrows or pluses to expand/collapse submenu items like the menu in the Page Builder Advanced Content module. As it is, the user does not know there are sub-menu links unless they hover over a category.

Please let me know what you find.
If you guys would like admin access to this dev site I would be happy to provide login details in a private message.

2

Hi ,

  1. As far as I can tell the issue is caused by custom CSS you have added. The CSS in question is this:
@media (min-width: 950px) {
  .fl-page-header-primary .row > div:first-child {
    width: 30%;
  }
}

  1. The CSS above appears to be causing this issue as well.

  2. Hehe again related to your custom CSS.

  3. I will bring this to the attention of our developers. In the meantime you could use Font Awesome on menu items that have child menu items. For example:

CloudApp

Thanks,
Danny

3

Good to know that the display issues was a simple CSS code snippet. I removed it and can confirm the navigation displays better.

I noticed that at medium viewport the menu changes from vertical to horizontal centered with the logo above the menu. Is there a way to choose the experience so that I go from the desktop (left aligned vertical) to mobile menu (hamburger icon). Even better, is there a way to choose a mobile menu experience from desktop to mobile so that I’m always displaying the hamburger and the visitor has to click the icon to open the navigation?

I would also prefer submenus appear in a expand/collapse format in the vertical desktop menu instead of the flyout currently being used. This would mimic the mobile navigation behavior. I don’t want to serve two experiences if I can help it. Is this something I can request? How would i do that?

Thanks

4

One more thing, on mobile, when a category has been expanded to show the sub-menu links, there isn’t an easy way to collapse the menu. For instance, if you click Electroforming, then click open Optical Coatings, you can easily collapse the Electroforming menu that was expanded. Why?

5

Hey Jcduron,

Feature requests can be made on our User Voice. Feel free to check if there’s already an existing request for some of those, so you can just vote for it.

Re the medium breakpoint header layout, sorry to say but we’ve no setting for that.

Ben