It would be good to discuss bootstrap and how menus should work by default.

We then need to provide a way for users to override the defaults.

Problem
The expectation of users with bootstrap menus is different.

Currently there are at least the following different expectations:
- User expects a standard menu with links (no dropdowns)
- User expects a menu with menu items displayed in a dropdown
- User expects a menu with menu items in a dropdown which also contain additional submenus!

The tricky part is that, additional to the above expectations is the desire for some to override the bootstrap method of using a menu item (which contains a submenu) as a click activator for the submenu (to support touch based screens).

How to we solve this?
We need to decide on a convention for how bootstrap menus should be configured out of the box. We then should communicate this convention to users, so they are not confused when they first install the theme.

We also need to have some way of overriding the default method bootstrap uses to manage menus. So if the user wants the menu to behave in a different way, they can just make a change, without thinking that there is something wrong with the theme.

Implementation

I've raised this issue as a point of discussion, once we get some ideas and agreement, we can work out the implementation.

Thoughts?

Comments

andregriffin’s picture

I think it should be configured the way Bootstrap intends at first, where a top-level dropdown simply activates the menu, and is not a link itself, and then perhaps write in the readme or reference this issue on how to override some of the data-toggle="dropdown" and hard-coded href="#" settings if they so choose.

Or perhaps just make this theme support a third-party module like Menu Block, which has that functionality be default, and we could just provide some styling for it.

zmove’s picture

You forget to mention one thing :

- User expects to use menu block instead of the old deprecated $primary and $secondary variables

natted’s picture

busla’s picture

I want to bump this up since sidebar menus on pages displaying the active menu link and sibling/submenu items are extremely common. By default this is not possible (as mentioned above).

The menu block has several settings for the user to manipulate the visibility of the menu but Bootstrap overrides that functionality it seems.

What I would like to see is the same functionality in a sidebar menu as is used in Bootstrap collapsed menus for mobiles since it collapses vertically and doesn´t flow over the sidebar to the right.

The only difference is that I would not want all the menu items to be hidden behind the button like on mobile but to have all sibling menus visible. So when clicking a sibling menu it would just collapse vertically.

henryhu’s picture

I need the following behavoirs of menu:

  1. Items of user menu are centered in the dropdown menu for mobile, instead of floating left now.
  2. User menu in mobile collapses automatically when the button loses focus. Now I have to click the button again to shrink user menu.
zilla’s picture

i would really like to be able to "mix" config for menu options like this:

1) not mobile: all options as they are right now

2) mobile: separate settings, which allows for fix to BOTTOM which is becoming a standard for "thumb based navigation with one hand" on mobile

ñull’s picture

Please add a setting to disable collapse for mobiles completely, for when you want to use alternative modules to handle this (tb_megamenu).

knalstaaf’s picture

Version: 7.x-2.x-dev » 7.x-3.0

I support the idea that a user can configure in the navbar settings (Appearance > Components > Navbar) at which point the primary menu should collapse (e.g. @768px instead of lower). Be it with a text-field or a select field with the default breakpoints in it.

rick_p’s picture

Before I say anything else, I want to say the theme is pretty awesome right out of the box. With that said, I wish I would have read these comments before I tried to customize it. I'm somewhat new to theming so forgive me if someone already said this (discussing lack of menu block for example), but I don't understand why the NAVBAR is inside the grey header area by default without an option to move it elsewhere. Well, you can move it to the bottom using the Theme's Appearance, but it brings the entire header with it. I'm sure for anyone who knows how to theme there is a fairly easy way to override this but for most of us, we're stuck with very limited choices of where we can position the menu, even with a sub-theme and custom CSS file.

Update: I read the README file in the templates folder after submitting the above comment. It lead me to copy the page.tpl.php file into my sub-theme themes folder. I moved the code that renders the $primary and $secondary nav out of the header and placed it inside the main-container, above the first div with the row class. This worked but brought the search box with it, which isn't ideal but with some CSS I was able to position the menu on the left and the search box on the right, just under the header. Not perfect but much better. Responsive still works but will need additional CSS now.

If there's a better way, please let me know. Thanks.

markhalliwell’s picture

Status: Active » Closed (duplicate)
Related issues: +#1893532: [bootstrap][policy][7.x-3.x] Navigation/Menus