CODEWITHSUNDEEP
htmlcsstwitter-bootstrapyui-pure-css
Don Smythe
Don Smythe

Reputation: 9814

Pure.CSS menu heading and menu list on same row

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

Upvotes: 0

Views: 1214

Answers (1)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17954

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>

Upvotes: 1

Related Questions