CODEWITHSUNDEEP
csscenterfooter
Rickie
Rickie

Reputation: 651

Shift Footer tag to center

I am working on a website adapted from http://joelb.me/scrollpath/ I want to relocate the footer menu which is float left to center. I have been working on this from 3 days. Kindly help

Upvotes: 0

Views: 281

Answers (2)

Rahul
Rahul

Reputation: 5774

If you are talking about the navigation menu on footer.. Here is how you can do it..

  1. Apply a class to <nav> i.e. <nav class='scrollNav'>

  2. Add CSS stylesheet for class scrollNav

    .scrollNav {
    margin: 0 auto;
    width: 400px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Margin will center the navigation. Width you can choose as per your menu bar width. Override position with absolute so that left, right and bottom position will work. And make left, right, bottom to 0. So that it will stick to bottom..

I hope that helps..

Thanks and regards,

Rahul Patil

Upvotes: 0

Goje87
Goje87

Reputation: 2869

I have checked the URL you have given in the question above. The nav has position: fixed. Therefore, adding a couple of CSS properties would do the job. You can add the below properties.

width: 320px;
left: 50%;
margin-left: -160px;

The trick is to give left as 50% which makes the element to start rendering after (vertical) center of the viewport. Then give margin-left as negative to pull it slightly back to left. Now, giving the magnitude of margin-left as half of the element's width will make sure that the element is pulled back to left in such a way that its vertical center coincides with that of the viewport.

Upvotes: 1

Related Questions