search

ebiwd / EBI-Framework

The EMBL-EBI Visual Framework for websites and services.
https://www.ebi.ac.uk/style-lab/websites/
19 stars 16 forks source link

Right-aligned menu bar doesn't correctly stack on mobile #140

Closed khawkins98 closed 6 years ago

khawkins98 commented 6 years ago

Echoing a report from @esanzgar

On mobile when there is more than one right-aligned menu option, they collide:

image

This is due to a margin-bottom rule that fixes a spacing issue but has unintended consequences; in https://github.com/ebiwd/EBI-Framework/blob/v1.3/css/ebi-css-build/_ebi_masthead_styles.scss#L246 :

  @media screen and (max-width: 39.9375em) {
    .masthead ul.menu.dropdown.float-right > li {
      margin-bottom: -50px;
    }
  }

Correctable by: 

  @media screen and (max-width: 39.9375em) {
    .masthead ul.menu.dropdown.float-right > li:last-child {
      margin-bottom: -50px;
    }
  }
khawkins98 commented 6 years ago

And fixed: image