how do I move the responsive menu to the right?

Question

I have a question on a responsive menu I made using this tutorial, it's pretty simple to implement and I will add the code here as well.

if you go to my page here, you can see I have a 5 item menu at the bottom. but I'm trying to make it shift to the right, I tried adding "float: right" to the nav, to the div, but it doesn't work.

Here is my HTML

<div class="container" style="background:lightgray; padding: 15px">
    <h3> 5 menu left </h3>
    <nav>
    <ul>
    <li><a class="current" href="#">PixelsDaily</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Work2</a></li>
    </ul>       
    </nav>
</div>

Here is my CSS

.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

* {
    padding: 0;
    margin: 0;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

nav {
    width: 90%;
    margin: 50px auto; 
}

nav ul {
    list-style: none;
   /* overflow: hidden; */
}

nav li a {
    background: #444;
    border-right: 1px solid #fff;
    color: #fff;
    display: block;
    float: left;
    font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 12.5%;

        /*TRANSISTIONS*/
    -webkit-transition: background 0.5s ease;
       -moz-transition: background 0.5s ease;
         -o-transition: background 0.5s ease;
        -ms-transition: background 0.5s ease;
            transition: background 0.5s ease;
}


 /*HOVER*/
nav li a:hover , nav li a.current{
    background: #222;
}

nav li a:visited {
    color:#FFF;
}

nav li:last-child a {
    border: none;
}

/*SMALL*/
nav small {
    color: #aaa;   
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;

}

/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
    nav li a {
        font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    nav small {
        font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
    }
}

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
    nav li a {
        width: 25%;
        border-bottom: 1px solid #fff;
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    nav li:last-child a, nav li:nth-child(4) a {
        border-right: none;
    }

    nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
        border-bottom: none;
    }
}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
    nav li a {
        width: 50%;
        font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    nav li:nth-child(even) a {
        border-right: none;
    }

    nav li:nth-child(5) a, nav li:nth-child(6) a {
        border-bottom: 1px solid #fff;
    }
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    nav li a {
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }
}

Menu/list alignment a persistent layout challenge. See http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu for how to place an alignment wrapper around the menu. — isherwood, Feb 01 '13 at 17:31
@Myy when do you want the nav to shift to the right? Before or after your media query? — darren wong, Feb 01 '13 at 17:21

Michael · Accepted Answer · 2013-02-01T17:37:03.257

0

Float your A's right instead of left.

OR, switch to display: inline-block; setup, instead of using floats.

jsfiddle: http://jsfiddle.net/LbApX/

HTML:

Home
Home
Home
Home
Home

CSS: nav ul { text-align: right; }

nav ul li {
    display: inline-block;
}

edited Feb 01 '13 at 17:37

answered Feb 01 '13 at 17:26

Michael

7,016
2
28
41

if I do that, the order of the items goes wrong, the first one becomes the last one and so forth – Myy Feb 01 '13 at 17:30
You can inverse the order your list items to accommodate. The problem is the width of the UL is spanning the full width of it's containing element. So floating it left or right makes no difference. You could switch to a display: inline-block setup instead of using floats. Hold on a moment and I'll make a js-fiddle demonstrating. – Michael Feb 01 '13 at 17:33
ok, so I shifted them to the right, but the blocks look all messed up now. look at my page in the question – Myy Feb 01 '13 at 17:53
1

got it, had to take away the "width: 12.5%;" in the nav li a, Thanks Michael – Myy Feb 01 '13 at 17:58
You need to adapt the text-align and display: inline-block code to what you already have. Remove the float:right on the A tag... Also lose the width tag on the A. That will get your blocks back. You just need to tweak what you had previously after you delet ethe above two pieces. – Michael Feb 01 '13 at 18:02

how do I move the responsive menu to the right?

1 Answers1