CODEWITHSUNDEEP
htmlcsscss-float
cpuxtech
cpuxtech

Reputation: 9

CSS Navigation Bar UL Not Centered

I am learning how to make a responsive website following a tutorial here http://www.hongkiat.com/blog/responsive-web-nav/

I am having a problem: I cannot position anything to the right UL inside the NAV & STILL KEEP THE UL CENTERED IN THE SCREEN. For some reason, even if 

ul{display:inline-block;}

and 

nav{text-align:center;}

the link #pull will push the UL to the left, not making it centered anymore. I want to make a login form floated to the right of the UL in the NAV where #pull is right now in the and I cannot for the life of me figure out how to do it while keeping the UL completely centered in the screen, whatever is to the right of the UL seems to push the UL over, even though it should be centered always.

I'm sure its just a basic CSS positioning issue that I can't figure out because I am new to this, but I just need to place more content on the and I cannot figure out how to.

JSFiddle

Upvotes: 0

Views: 208

Answers (4)

Sunny
Sunny

Reputation: 31

Just add display:table; margin: 0 auto on your UL.

Upvotes: 0

Raunak Kathuria
Raunak Kathuria

Reputation: 3225

You are using px in responsive design instead use %

Updated CSS // all width in %

nav{
    height:50px;
    width:100%;
}

nav ul{
    padding:0;
    margin: 0 auto;     /*No Y-axis margin, Only an Auto X-axis margin, making the ul centered*/
    width:80%;  
}

nav li{
    list-style:none; /*display:inline; also gets rid of the list styles*/ 
    float:left;      /*Floating the menu list items to the left so they will be
                  displayed horizontally side by side, but floating an element
                      will also cause their parent to collapse*/
    dislay: inline-block;
    min-width: 23%;
}

#navaside {
    height:50px;
    width:15%;                          /* Takes up 100% of the parent's width, 
}

#navaside a#pull{

    color:#fff;                 /* Color of the link */
    display:inline-block;       /* display:block (also)--Allows the width and line height to actually take affect */
    width:100%;                /* 5 elements at 140px = 700px, the width of the 
}

Check http://jsfiddle.net/raunakkathuria/aF3Pd/7/

You can style a or li as per your requirement, I have just fixed some css to make it responsive

Upvotes: 0

Rayan Bouajram
Rayan Bouajram

Reputation: 743

An easy way to do this is by using the position css property to position the "Menu" button over the UL. Make sure you set the nav tag with a position:relative property, then take the menu button and set the following:

position:absolute;
top:0;
right:0;

This should keep the menu button on the top right, especially in the case of responsive web design.

See fiddle: http://jsfiddle.net/p3tK5/

Upvotes: 2

Hevlastka
Hevlastka

Reputation: 1948

Try adding 

position:relative;
left: 8vw;

to your nav ul. See this for more info about vw and vh and more.

Upvotes: 1

Related Questions