Using the dev branches of navbar and bootstrap, I see some issues with the shortcuts bar.

While on a bootstrap themed page, the shortcuts navbar region displays on 2 lines instead of one. Comparing the source code between my frontend page (bootstrap) and a backend page (seven) I see that the difference is caused by an additional class that (it appears) is put there by bootstrap.

On the seven theme, I have this:

<ul class="menu navbar-menu-processed navbar-menu-root navbar-root">

but on bootstrap, I have this:

<ul class="menu nav navbar-menu-processed navbar-menu-root navbar-root">

taking off the 'nav' class in the developer console makes it work again. I haven't tracked it down yet, but I'm pretty sure this is some template.php function or preprocess function of bootstrap that inadvertently target navbars shortcut ul.

It seems like a bootstrap error, but I'd thought I'd post here to see if anyone wants to fix it here instead. It seems like a number of changes over the last couple of months fixed similar issues and conflicts, so maybe shortcuts was just overlooked?

I'll post in bootstrap queue as well.

CommentFileSizeAuthor
Screen Shot 2014-04-10 at 5.12.40 PM.png23.43 KBmeecect

Comments

meecect’s picture

meecect commented

Issue in bootstrap queue:

https://drupal.org/node/2238137

meecect’s picture

meecect commented

I'm not sure why there aren't more reports about this; it would seem to affect anyone using any bootstrap theme with this module.

Anyway, I investigated this more, and I'm not sure it can be fixed in the bootstrap theme, as adding the 'nav' class to ul's seem to be required for a lot bootstrap functionality.

The root styling issue seems to be that bootstrap assigns some whitespace and table styling to the .nav:before and .nav:after selectors, along with a boat load of other selectors. Like this:

.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
content: " ";
display: table;
}

I didn't want to just eliminate those styles, as I assume they are needed elsewhere, so I did this in my subtheme:

.drupal-navbar ul.nav:before, .drupal-navbar ul.nav:after {
content: "";
display:  none;
}

this could perhaps be targeted more towards the shortcut menu. I think only the shortcuts menu is affected because it is the only one that goes through the theme hooks and modified by bootstrap. So we could narrow it to this:

.drupal-navbar .navbar-tray-shortcuts ul.nav:before, .drupal-navbar .navbar-tray-shortcuts ul.nav:after {
content: "";
display:  none;
}

It would be nice is someone could test this in their bootstrap themes.

hass’s picture

hass commented
Status: Active » Closed (duplicate)
Parent issue: » #2119989: Add navbar_menu_tree() to prevent theme clashes