how to center a CSS Nav menu?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
how do i center a CSS navigation (mainly a Question For LittleUs & Boomer :)

Thanks

Alex
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Alex

Normally I would put <div align=center> after the style/css tag. Although it does center it.. it's still off centered! There's some kind of padding in that CSS horizontal nav menu that is causing it to misalign. I have yet to discover which snippet of code to adjust so that it centers properly. Once I figure it out Alex, I can pass that info on to you.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Boomer may be able to figure it out though.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay, Thanks Littleus. i will wait nfor boomer because i i dont know how to mess around with CSS menus :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Alex

I found a way to "center" the CSS Nav. Menu. What you need to do is look for this code -

<style type="text/css"> #sddm { margin: 0; padding: 0; z-index: 30}

It should be at the very top. Where it says margin: 0px - that's where you input your new margin number. Just change the number - do not delete anything else. So instead of 0, you could put in 20px. This will move your nav bar over. You will need to preview it to see how it looks. You just keep increasing or decreasing the number until the nav bar looks centered.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
ohh, thanks :) !
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
littleus!

look

http://sportie.yolasite.com/zome

it is awsome! thanks!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Umm.. in FF, the "extras" menu goes to the second line. You just have to make the boxes smaller. Look for this:



Change the width size.

Then, look for this:



Change the width size 2 numbers smaller - if the first box is 20px, then this one should be 18px.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay, thanks littleus. i am changing it now :D
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Also... a question for you.... On the Yola Test Site, can I get rid of your Alex's test site? You can create a new one on the new Yola Test site. Is this okay?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
yes, go ahead, i dont use it :)
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Littleus... you're awesome! Thanks so much for your help on these threads, you're html skills are wonderful and such an asset to this community!