0

I am using the Pure.css (purecss.io) framework to layout a website. I am using a horizontal menu along the top of the screen. I can't work out how to position menu items to be on the same (first) row as the menu heading. ie in HTML:

<div class="header">
    <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
        <a class="pure-menu-heading" href="">My Website</a>
        <ul class="pure-menu-list">
            <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">About</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Log In</a></li>
        </ul>
    </div>
</div>

I am using the standard pure.css file and I suspect the issue is something to do with either using a ul tag or because the default pure layout is a vertical menu underneath the menu heading. Has anyone managed to position heading and list on the same line (eg as per a bootstrap header)?

Don Smythe
  • 9,234
  • 14
  • 62
  • 105
  • What do you mean? If I run that code everything appears to be on one straight line. –  Jan 30 '16 at 11:17
  • When the pure.css is used the heading and menu items are on separate lines. The answer below by Trix fixed it. – Don Smythe Jan 30 '16 at 11:41

1 Answers1

1

If you want the lis be in one line, next to each other, you may use floats:

.pure-menu-list{ list-style: none; }
.pure-menu-list li{ float: left; }

So:

.pure-menu-heading{ float: left; }
.pure-menu-list{ float: left;list-style: none; margin: 0; }
.pure-menu-list li{ float: left; margin-right: 10px; }
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
        <a class="pure-menu-heading" href="">My Website</a>
        <ul class="pure-menu-list">
            <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">About</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Log In</a></li>
        </ul>
    </div>
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
  • @DonSyme "The whole point of Pure CSS is to avoid flow-breaking floats. Not saying your finding is not correct, but the solution should be non-floating." See https://github.com/yahoo/pure/issues/499#issuecomment-108750871 – Ahmed Fasih Feb 26 '16 at 04:52