Using dropdown in main menu nav shows caret (i.e. expanded on), but doesn't react on click. This was fixed by deleting "dropdown" dependency in subtheme yml (found in a forum).

Clicking submenu caret brings up submenu now, but behind page title (see attached screen part); looks like CSS styling issue.

CommentFileSizeAuthor
#6 Drupal 8 Bootstrap Opacity Issue Styles.png19.21 KBjanes_p
#6 Drupal 8 Bootstrap Opacity Issue Screen.png47.57 KBjanes_p
Drupal 8 Bootstrap Submenu.png277.97 KBjanes_p
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

janes_p created an issue. See original summary.

Webeez’s picture

Webeez CreditAttribution: Webeez commented

z-index?

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Category: Bug report » Support request
Status: Active » Closed (won't fix)
Issue tags: -bootstrap theme

Closing per http://drupal-bootstrap.org/api/bootstrap/docs%21Contributing.md/group/c...

Reason: site specific, css/layout

janes_p’s picture

janes_p CreditAttribution: janes_p commented

As there is almost no proprietary styling, this looks like a CSS issue in the bootstrap theme/subtheme framework to me; I will do some more research and report findings here (however I am not so much a CSS person)

janes_p’s picture

janes_p CreditAttribution: janes_p commented

I tried a plain Bootstrap subtheme and dropdown menus are working fine with it. Looks like I already made too many changes in Twig page template and CSS. Apologies for bothering...

janes_p’s picture

janes_p CreditAttribution: janes_p commented
FileSize
Drupal 8 Bootstrap Opacity Issue Screen.png47.57 KB
Drupal 8 Bootstrap Opacity Issue Styles.png19.21 KB

The issue is caused by an opacity styling (which I am using to let a background picture shine through): Even with a Bootstrap subtheme in its plainest form, as soon as I assign background opacity styling to the .navbar class, the dropdown menu slips underneath the page title (see attached screens for effect and styling). I think this justifies a reopen request.

BTW: I couldn't z-index get to work

janes_p’s picture

janes_p CreditAttribution: janes_p commented
Status: Closed (won't fix) » Active

Can you please re-assess, based on most recent findings? Thanks

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Active » Closed (won't fix)

I think this justifies a reopen request.

No it doesn't. This project is not responsible for CSS customization, teaching how CSS works or any browser limitations around CSS.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented

FWIW, a quick search turned up: http://stackoverflow.com/a/11742116/1226717

Simply put: you're trying to style the wrong element.

janes_p’s picture

janes_p CreditAttribution: janes_p commented

I found a solution: Working with rgba instead of color and opacity doesn't create the undesired effects (styling the same element)

learnbydrop’s picture

learnbydrop CreditAttribution: learnbydrop commented

Add this custom JS in the theme js file, it will resolve the issue.
Review the code implemented in http://www.stayinpg.in

jQuery('.dropdown-toggle').mouseover(
function() {
jQuery('.dropdown-menu' ).css( "display","block" );
}
);
jQuery('.dropdown-menu').mouseover(
function() {
jQuery('.dropdown-menu' ).css( "display","block" );
}
);
jQuery('.dropdown-toggle').mouseout(
function() {
jQuery('.dropdown-menu' ).css( "display","none" );
}
);