0

Pure css pure-menu-heading not aligning with items in Firefox? To see run this on Firefox,http://purecss.io/layouts/marketing/. 'YOUR SITE' pure-menu-heading is above the pure-menu-item items but aligns well in Chromium and Opera. Also class 'header' is not in 

<link rel="stylesheet" href="/combo/1.18.13?/css/layouts/marketing.css">?
user7339197
  • 1,879
  • 2
  • 9
  • 12

3 Answers3

1

you need to float:left the "your site" (.home-menu .pure-menu-heading) that fixes it

the reason this happens in firefox (according to this answer Firefox unexpected line break using floats & overflow hidden - and also checked) is that firefox set default white-space to nowrap.

so setting the wrapper div .pure-menu.pure-menu-fixed to white-space:normal also fixes this issue and might actually be a better solution for you

Community
  • 1
  • 1
Jameson the dog
  • 1,796
  • 1
  • 11
  • 12
1

Just add float: left to .pure-menu-heading. Like:

.pure-menu-heading {
  float: left;
}

Hope this helps!

Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
0

change your HTML like below 

<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li>
    </ul>
<a class="pure-menu-heading" href="">Your Site</a>     
</div>

put anchor tag after ul

AG_
  • 2,589
  • 3
  • 20
  • 32
  • anchor tag is taking its own space in firefox and ul start after the space occupied by anchor – AG_ Dec 25 '16 at 08:10