Webcouturier.dropdownmenu gives small space below menu bar in Plone 5.1

Plone Support Add-on Development
1

I recently updated from Plone 5.0.8, re installing the great webcouturier.dropdownmenu. I noticed from the start that there was a small glitch in the dropdown menu: there was a small gap between the menubar and where the dropdown menu starts (see the gap shown in the screen shot). If one doesn't pass over it quickly enough the dropdown menu goes away.

ss_1273
ss_1273.png838×294 60.6 KB

I hoped that installing the 3.0.2 update would solve this but it doesn't. Anything I can do? Thanks,

David

2

Make a bug report with webcouturier.dropdownmenu github repo.
or fix and submit a PR to same repo.

3

Does it happen in a new Plone site with webcouturier.dropdownmenu installed? If not, it's more likely something in your theme's CSS.

4

I thought this was already fixed, but I couldn't find the commit right now. But you can fix it by adding this CSS:

.dropdown-menu {
  border: none;
  border-radius: 0;
  margin-top: 0;
  padding: 0;
}
5

If you just add it, I think something else has 'higher priority', so you might have to use something like:

#mainnavigation .dropdown-menu {
6

Hi @djay, I did try to do that but was uncertain if this was the proper page: https://github.com/mishunov/webcouturier.dropdownmenu as the work appears to be from more than 5 years ago. Please let me know if this is the correct repository. Thanks!

7

Hi @dgroos, it is this one: https://github.com/collective/webcouturier.dropdownmenu

8

Hi @davisagli, in 5.0.8 I had deactivated the sunrain theme months ago and was using standard Barceloneta since then. Since upgrading to 5.1, I've only used Barceloneta. So while not a fresh Plone install, it has been using the default theme.

9

Hi @tmassman, Thanks for this! I can do some admin things but only w/googling and luck :slight_smile: I deactivated then downloaded a copy of my theme, edited the barceloneta/less/dropdowns.plone.less file to include your snippet (also checked the box in the ZMI portal_css, "Development mode"), zipped it and re-uploaded/enabled it.

I embedded the snippet as shown in the following slightly larger snippet which includes a few lines either side to show the context. I doubt I guessed correctly as it didn't remove the gap... [Also, I see you just gave me the proper github repository, I'll submit the bug report now, thanks.]

// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdown-divider-bg);
}

// testing fix here
.dropdown-menu {
border: none;
border-radius: 0;
margin-top: 0;
padding: 0;
}

// Links within the dropdown menu

li > a {
display: block;
padding: 3px 20px;

10

@espenmn I'm just shooting in the dark here, but tried implementing this as shown in the screenshot below.
[BTW, https://github.com/espenmn/medialog.magneticpopup still working like a charm!]

sss-881

Also, submitted the bug report.

11

Great… I have not even used it myself :slight_smile: