CODEWITHSUNDEEP
htmlcss
Tom Finet
Tom Finet

Reputation: 487

How to position certain elements in the navbar on the right

I've been working on a navbar for a website and wanted to have 4 elements on the left side of the screen and 2 on the right side of the screen. I'm sure there is a simple solution, but I'm just not getting the elements to float left and right.

This is my HTML:

<div id="navbar">
        <ul>
            <!--<li><a href="index.html" class="logo"><img src="../img/PowerUpLogo.gif" class="logo"></a></li>-->
            <li><a href="home.html">Brand</a></li>
            <li><a href="stories.html">Link</a></li>
            <li><a href="community.html">Link</a></li>
            <li><a href="contact.html">Link</a></li>
            <span class="padding"><a href="log_in.html" class="button button-log-in">Log In</a></span>
            <span class="padding"><a href="sign_up.html" class="button button-sign-up">Sign Up</a></span>
        </ul>
    </div>

Here's my CSS:

/*****NAVBAR****/
#navbar ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#navbar ul li {
    display: inline-block;
    padding: 1.5% 2%;
}

#navbar ul li a {
    color: #4F8E64;
    font-size: 0.9em;
    font-weight: 500;
}

#navbar ul li a:hover {
    text-decoration: underline;
}

/**********************
******NAV BUTTONS******
**********************/

    .button {
    font-size: 0.9em;
}

.button-log-in {
    color: #6EC78B;
    background-color: #FFF;
    border: 1px solid #6EC78B;
}

.button-log-in:hover {
    color: #5CE68A;
    border: 1px solid #5CE68A;
}

.button-sign-up {
    color: #FFF;
    background-color: #6EC78B;
}

.button-sign-up:hover {
    background-color: #5CE68A;
}

Upvotes: 1

Views: 5862

Answers (5)

Rene van der Lende
Rene van der Lende

Reputation: 5281

Go crazy and start using FLEXBOX capabilities. Minimal changes and it works like a charm.

AND move the buttons out of the UL, give them their own container div. Check the snippet for comments...

* { outline: 1px dashed red } /* just for debugging, remove */

#navbar { /* ADD make navbar a flex container */
    display: flex; 
    justify-content: space-between; /* moves 2 elements (UL and #buttons)
                                       to either side of #navbar */
}

/*****NAVBAR****/
#navbar ul {
    display: flex;  /* ADD make UL a flex container too */
    flex: 1 1 auto; /* ADD grow child elements (LI, default = 0 1 auto)*/
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#navbar ul li {
    display: inline-block;
    padding: 1.5% 2%;
}

#navbar ul li a {
    color: #4F8E64;
    font-size: 0.9em;
    font-weight: 500;
}

#navbar ul li a:hover {
    text-decoration: underline;
}

/**********************
******NAV BUTTONS******
**********************/

    .button {
    font-size: 0.9em;
}

.button-log-in {
    color: #6EC78B;
    background-color: #FFF;
    border: 1px solid #6EC78B;
}

.button-log-in:hover {
    color: #5CE68A;
    border: 1px solid #5CE68A;
}

.button-sign-up {
    color: #FFF;
    background-color: #6EC78B;
}

.button-sign-up:hover {
    background-color: #5CE68A;
}
<div id="navbar">
  <ul>
    <!--<li><a href="index.html" class="logo"><img src="../img/PowerUpLogo.gif" class="logo"></a></li>-->
    <li><a href="home.html">Brand</a></li>
    <li><a href="stories.html">Link</a></li>
    <li><a href="community.html">Link</a></li>
    <li><a href="contact.html">Link</a></li>
  </ul>
  <div id="buttons"> <!-- id is optional -->
    <span class="padding"><a href="log_in.html"  class="button button-log-in">Log In</a></span>
    <span class="padding"><a href="sign_up.html" class="button button-sign-up">Sign Up</a></span>
  </div>
</div>

Upvotes: 1

Kunjan Shah
Kunjan Shah

Reputation: 86

#navbar ul li:nth-child(2) {
    float: right;
}

it gives you second li element to the right side.

there is also lot many ways for doing this but this is the most shortest way.

Upvotes: 2

Marcel Wasilewski
Marcel Wasilewski

Reputation: 2679

The most simple solution would be putting a div around the two elements that should be on the right, then float them right:

            <div class="right">
            <span class="padding"><a href="log_in.html" class="button button-log-in">Log In</a></span>
            <span class="padding"><a href="sign_up.html" class="button button-sign-up">Sign Up</a></span>
            </div>

css

 .right {
        float: right;
    }

Here is the fiddle: https://jsfiddle.net/uvo0ceu1/1/

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You have an invalid HTML, as you cannot nest <span> directly inside <ul>. Only <li>s are allowed. You can add a class, say right to the <li> and float it.

<li class="right"><!-- Stuff --></li>

And give the following CSS:

.right {float: right;}

Make sure you give overflow: hidden to the parent <ul> to clear the floats.

Upvotes: 6

giorgio
giorgio

Reputation: 10202

Most easy solution is to wrap the button groups in another div, eg. <div class="nav-left"></div> and <div class="nav-right"></div>. Then just add css attributes:

.nav-left { float: left; }
.nav-right { float: right; }

You might need to add a clearfix, depending on the rest of the styling.

Upvotes: 1

Related Questions