Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

.fixed .top-bar prevents mouse interaction with adjacent elements #1278

Closed
yarosla opened this Issue · 4 comments

3 participants

@yarosla

The fix to Issue #1121 has made interactive elements (eg, links in breadcrumbs) not accessible when placed just under the .fixed .top-bar.

It is position:relative that has made top-bar element opaque including 30px margin below it. Mouse clicks do not reach elements that are within 30px under top-bar.

I think the margin should be removed when the top-bar is .fixed. The following rule resolves the regression:

.fixed .top-bar {margin-bottom:0;}

Tested with latest Chrome & Firefox.

@ghaida ghaida was assigned
@ghaida

Thanks, @yarosla! Could you show us an example of your markup?

@ghaida

Thanks! This code should fix the problem:

.fixed + .row { margin-top: 45px; }
@yarosla

Sorry for not replying in time. I just could not check your proposed solution immediately. Now that I've checked, I can confirm that this does not fix the problem. It only moves content down by another 45px (jquery.foundation.topbar.js already does that via javascript).

As links scroll closer to top-bar they become unreachable same as before. There is a "dead area" below the top-bar due to its bottom margin of 30px. My proposed solution removes that margin as well as the "dead area".

.fixed .top-bar {margin-bottom:0;}
@ghaida ghaida removed their assignment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.