CODEWITHSUNDEEP
htmlcsspositioning
user2426062
user2426062

Reputation: 109

Positioning social icons on a navigation bar

This is what my page currently looks like: Here

I want the social icons to position in line with the rest of the navigation content. At the moment they are beneath the content. I thought float right would fix things. Is it because of my browser size? How can I fix this then? Here is my code:

HTML:

<div id="Nav">
<div id="NavContent">
    <ul>
        <li id="Title">PavSidhu.com</li>
        <li>Home</li>
        <li>Web Design</li>
        <li>Graphic Design</li>
        <li>How it Works</li>
        <li>Pay</li>
        <li>Contact</li>
    </ul>

        <img src="Images/Twitter.png" class="Social"/> 
        <img src="Images/Pinterest.png" class="Social"/>
</div>
</div>

CSS:

    #Nav {
    position:fixed;
    width:100%; 
    background-color:#f26522;
}

#NavContent {
    margin:0 auto;
    width:90%;
}

ul {
    margin:0;
    padding:0;  
}

li {
    font-family: Bebas;
    color:#FFF;
    list-style-type:none;
    margin:0;
    padding:0 1%;
    display:inline;
    vertical-align:middle;
    font-size:20px;

}

#Title {
    font-size: 35px;
}

.Social {
    height:35px;
    float:right;
}

Thanks guys :)

Upvotes: 0

Views: 1962

Answers (4)

Marc Audet
Marc Audet

Reputation: 46785

As explained earlier, ul is a block element that will take 100% of the width of the parent element, so the floated elements will start on the next line.

To fix this, you can use:

ul { 
    margin:0;
    padding:0;
    border: 1px solid blue; /*for demo only */
    display: inline-block;
    width: inherit;
}

See demo at: http://jsfiddle.net/audetwebdesign/tAjW8/

You need to set width: inherit or else the computed width will be narrower than you might expect.

Upvotes: 0

Jeroen
Jeroen

Reputation: 2093

You mean you want the social-media-icons higher? Next to the menu-items instead?

Try using

display: inline-block;

for your ul.

Upvotes: 1

jmore009
jmore009

Reputation: 12923

set ul to display: inline-block

Upvotes: 0

user3144883
user3144883

Reputation:

The <ul> is a block element, so it wants to be 100% width by default. If you make it an inline element with display: inline; instead, there will be space for the icons to sit next to the rest of the nav bar.

ul {
    margin:0;
    padding:0;
    display: inline;
}

Upvotes: 1

Related Questions