Reputation: 65

How to position <h1> element on the same line as navigation links?

Sorry for a beginners question. I'm trying to position my navigation bar along the same 'line' as the element. In this case 'title'. Basically just trying to get it to appear on the one line in the header.

HTML:

<header role="banner">
            <h1>
            <a href ="#" title="Title" rel ="home">Title</a>
        </h1>
<!--Navigation Start-->
        <nav role ="navigation">
            <div class ="navigation-menu-container">
                <ul id ="navigation-menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Skills &amp; Field of Interests</a></li>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">Resume</a></li>
                    <li><a href="#">Contact Me</a></li>
                </ul>
                <span></span>
            </div>
        </nav>
    </header>
<!--Navigation End-->

CSS:

a:link{

    text-decoration: underline;
    color: #ecf0f1;

}

a:hover {

   text-decoration: underline;
    color: #ecf0f1;
}

a:visited {

    text-decoration: underline;
    color: #ecf0f1;
h1
{
font-family: 'Lato', sans-serif;
}

    .navigation-menu-container {


        padding: 30px;
        border: 0;
        font-size: 18px;
        font-weight: normal;
        font-family: 'Lato', sans-serif;
    }


    #navigation-menu {

        text-align: justify;
        padding: 20px;

    }

    #navigation-menu * {

        display: inline;
    }

    #navigation-menu li {

        display: inline-block;    
        padding-right: 35px;
    }

    #navigation-menu span {

        display: inline-block;
        position: relative;
        width: 100%;
        height: 0;
    }

Upvotes: 1

Answers (3)

PixelAcorn

Reputation: 494

Add display: inline to your h1 tag. This should fix it.

The reason it doesn't work how it is, is that h1 tags are set to display: block by default, which means they will take up as much horizontal space as their parent element.

Setting it to display: inline, (or display: inline-block)* overrides the default style and makes it able to get "inline" with other "inline" elements.

Here is a jsfiddle that displays my point.

*inline-block is different than inline in that inline won't let you set width or height.

Upvotes: 7