Pure css pure-menu-heading not aligning with items in Firefox?

Question

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">? 

Answer 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

Answer 2

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

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

Hope this helps!

Answer 3

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