0

I'm trying to get the nav_right section of the nav bar to align to the right but line up against the right hand edge of the company name: https://i.stack.imgur.com/8xXfV.png

I can set .nav ul to 24.5em to line things up but on different screen sizes this doesn't work.

Here is the CSS:

    *{
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

ul{
    list-style-type: none;
}

a{
    text-decoration: none;
    color: inherit;
}

.nav{
    width: auto;
    padding: 2em 0 0 0.5em;
    background-color:rgba(0,0,0,1);
}

.nav ul{
    width: 24.5em;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    text-transform: uppercase;
}

.nav li{    
    font-weight: 100;
    font-size: 3em;
    color: #fff;
 }
.nav b{
    font-weight: 900;
}
.nav li:hover{
    text-decoration: #000;
}

#nav_right{
    font-size: 0.8em;
    font-weight: 600;
    text-align: right;
}

.triangle{
    width: 0; 
    height: 0; 
    border-top: 10px solid #000;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    margin: auto;
    opacity: 0.4;
}

img{
    float: right;
    width: 10%;
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;

}

.main_wrapper{
    width: auto;
    height: 100px;
    margin-left: 1em;
    margin-top: 20%;
    overflow: hidden;
    float: left;
    background-color: #000;
    border-radius: 10px;
    opacity: 0.4;
    box-shadow: 0 0 1em #000;
}

And here is the HTML:

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/test.css" />
        <title>TEST</title>
    </head>
    <body>
        <nav>
            <div class="nav">
                <ul>
                    <li id="nav_right"><a href="#">HOME</a> | <a href="#about">ABOUT</a> | <a href="#contact">CONTACT</a></li>
                    <a href="#"><li>company<b>name</b></li></a>
                </ul>
            </div>
        </nav>
    </body>
</html>
1
  • Try putting the li with the nav links after the company name li in the HTML and use display:inline-block to get them next to each other Oct 9, 2013 at 14:39

3 Answers 3

1

You can restructure your CSS and HTML to set a width for the nav class. Separate all your links into li and add styling that adds margin and a white line. This way, when you add more items, the style will automatically be applied to other list items.

This code will always align the menu to the right edge across all browsers. The only downside is that your list items have to be put backwards. From last to first because float:right is switching the order.

CSS:

    * {
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
    }

    nav {
        background: #000;
    }

    .nav {
        width: 24.5em;
        padding: 2em 0 0 0.5em;
        background-color: rgba(0,0,0,1);
        font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
        text-transform: uppercase;
    }

        .nav ul {
            text-align: right;
            list-style-type: none;
        }

        .nav a {
            text-decoration: none;
            color: inherit;
            padding: 0;
        }

        .nav li {
            color: #fff;
            display: inline;
            padding: 0 6px;
            border-right: 1px solid #fff;
            font-size: 0.8em;
            font-weight: 600;
            float: right;
        }

            .nav li:first-child {
                padding-right: 0;
                border: none;
            }

            .nav li:last-child {
                padding-left: 0;
            }

        .nav #companyName {
            font-size: 3em;
            color: #fff;
        }

            .nav #companyName b {
                font-weight: 900;
            }

        .nav li:hover {
            text-decoration: underline;
        }


    .triangle {
        width: 0;
        height: 0;
        border-top: 10px solid #000;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid transparent;
        margin: auto;
        opacity: 0.4;
    }

    img {
        float: right;
        width: 10%;
        margin-top: 1em;
        margin-left: 1em;
        margin-right: 1em;
    }

    .main_wrapper {
        width: auto;
        height: 100px;
        margin-left: 1em;
        margin-top: 20%;
        overflow: hidden;
        float: left;
        background-color: #000;
        border-radius: 10px;
        opacity: 0.4;
        box-shadow: 0 0 1em #000;
    }

HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="css/test.css" />
        <title>TEST</title>
    </head>
    <body>
        <nav>
            <div class="nav">
                <ul>
                    <li><a href="#contact">CONTACT</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#">HOME</a></li>
                </ul>
                <div id="companyName">
                    <a href="#">company<b>name</b></a>
                </div>
            </div>
        </nav>
    </body>
    </html>
0

Does adding

nav li {
    text-align: right;
}

Do what you are looking for?

Example

Edit

To achieve what you want, you can remove the width declaration and instead declare display: inline-block on the ul element. The element will then stretch only to the width of its widest content (in this case your li containing the big CompanyName) instead of the whole width of the parent element.

Your other menu will then align to the right of the element as you wish.

So basically:

nav ul {
    display: inline-block;
}

nav li {
    text-align: right;
}

Example

P.S.

By the way, your markup is really weird, and you probably should refactor that. Your menu items are all enclosed in one single <li> while they should each be a separate element; you could then add the purely presentational | vertical bars through CSS.

2
  • Yes it does, but I would prefer it to not use .nav ul{ width: 24.5em; } to align right to but automatically use the width of company name
    – Whuhay
    Oct 9, 2013 at 14:45
  • I see. Edited answer to meet your new requirement. Oct 9, 2013 at 15:54
0

put the a tag with company name on the outside of the div called nav.

HTML

 <html>
        <head>
            <link rel="stylesheet" href="css/test.css" />
            <title>TEST</title>
        </head>
        <body>
            <nav>
              <a href="#" class="companyname"><li>company<b>name</b>
                <div class="nav">
                    <ul>
                        <li id="nav_right"><a href="#">HOME</a> | <a href="#about">ABOUT</a> |                <a href="#contact">CONTACT</a></li>
                        </li>
                    </ul>
                </div>
            </nav>
        </body>
    </html>

CSS

    nav {
     margin: 0;
     padding: 0;
    overflow: hidden
   }
   .companyname {
      display: inline-block;
      float: left;
      margin: 0;
     padding: 0;
   }

  .nav ul{
   display: inline-block;
   float: right
   margin: 0;
   padding: 0;
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.