Hover on main menu causes following item to disappear if spills over to two lines

[mvl22]

If there are too many main menu items for the current screen width, and the menu spills to two lines, a hover on the final item on the top line causes the following item to disappear.

Example 1:

Initial state:

Hover state:

(Note that 'Innovation at Cambridge' has now disappeared.)

Example 2:

Initial state:

Hover state:

(Note that 'Contacts' has now disappeared, and an extra blank line's worth of space has appeared.)

[alt36]

The problem isn't that the items are being hidden as such. When you have more than one row, and hover over the last item on the first row, the first item on the second row jumps to the right, and also pushes any remaining items from the second row onto a third row. See e.g. http://www.ch.cam.ac.uk/photography where all the nav bar items are childless; below is a screenshot of what happens when you hover on the "other services" menu item:

In all of Martin's examples, the actual problem is obscured (in multiple senses of the word!) by the drop-down items.

Ultimately the problem arises because the ".campl-local-navigation li" elements acquire margin-bottom: -1px when they are also .campl-hover. Thus the quasi fix might be something akin to:

.js .campl-local-navigation li.campl-hover {margin-bottom: 0px;}

but I've not yet looked hard enough to see a) where the -1px margin comes from, b) why any of those elements might have a -1px margin in the first place, and thus c) what might break if one sets this

[orion434]

I've tried to reproduce this issue and it appears that it does not happen anymore. Maybe this issue should be closed. Another possibility is to dynamically switch to the dropdown view when the size of the window is lower than the menu width.

[alt36]

I definitely still have the problem on the Drupal version of Project Light. It is also demonstrably a problem on some live Falcon sites, e.g. www.phy.cam.ac.uk: resize window so that the first row of nav items stops at "staff directory" and then "Jobs" and "Contacts" roll onto the second row, then hover over "staff directory". I'm not seeing any changes in the commit history for this repo that change the css in the way I described in my previous post, though I can't say I've read every single line of every commit in detail.

[mgkuhn]

@orion434 This problem still exists in the current version of this repository, as you can see e.g. at https://mgkuhn.github.io/Project-Light/template-variants/section-landing.html if you resize your browser window or viewport to about 810px wide, such that the "Libraries & facilities" tab wraps into the next line. Then hover on the preceding "Research" tab and watch how "Libraries & facilities" jumps to the right (and also how the rest of the page jumps up slightly (about 1 px). (This is tested with Firefox Quantum 67.0.3 on Ubuntu 16.04.)

(This bug is one of the reasons why I still consider Project Light to be in beta testing.)

[orion434]

@mgkuhn I had a look at your page and one way to solve it is changing the width where the menu changes to the dropdown, from 767px to about 833px. You can add your own rule in the custom css section:

@media (max-width: 840px)
.js .campl-menu-btn span {
    padding: 15px 0 15px 25px !important;
    display: block !important;
}

EDIT: I saw that there are other menu parts of the css where 767px is hardcoded. Maybe a solution would be to use a variable to be set in the template for the different dimensions of the viewport.

[orion434]

I found the issue:

.campl-local-navigation li.campl-hover a {
    border-bottom: 0;
}

This should be fixed in the sourcecode. Meanwhile, it could be manually overwritten in the custom CSS with:

.campl-local-navigation li.campl-hover a {
    border-bottom: 1px !important;
}

EDIT: There is already a pull request to fix the css: #92