CODEWITHSUNDEEP
htmlcss
Startec
Startec

Reputation: 13206

How to put an h1 on the same line and in the middle of a nav ul

I am making a nav bar for my site. In I want the nav bar to have horizontally centered li items, except I wan the middle item to be an h1 that is preferably not part of the list. (This is to keep nav items specific to navigation, not the title of the page.

Right now my HTML looks like this (I am using icon-fonts btw):

<nav class="nav">
    <h1>Page title</h1>
    <ul>
        <li><span data-icon="&#xE603;"></span><h2>HOME</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>ABOUT</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>CONTACT</h2></li>
    </ul>
</nav>

And my css is this:

nav {
    background: gray;
    text-align: center;
}
nav li:first-child {
    display: inline-block;
    float: left;
}

nav li {
    float: right
}

The output looks like this:

enter image description here

No matter what I try I can not get the h1 on the same line. Note that I do not want to just insert a p element as the second item on the list. Any help would be great.

Upvotes: 1

Views: 444

Answers (1)

Jaime Gomez
Jaime Gomez

Reputation: 7067

I think adding this will help:

nav { position: relative; }
nav h1 { position: absolute; top: 0; width: 100%; }

Upvotes: 1

Related Questions