WordPress.org

1. bradystarr
   Member
   Posted 1 year ago #
   

   hi,
   i dont have much experience with css, i recently designed a site at wordpress.com, learned the diffrence between the .com and the .org, transfered my site to add some java then fell down the rabbit hole of programming.

   ive done pretty well so far, i have managed not to break my site entireley and i have learned a lot and hope to learn a lot more. I typically figure things out on my own but this one has stumped me for about a day now.

   I added a Multi-Level Navigation menu to some pages of my site and cannot center it. I have found a lot of people have had this issue and not too many answers, although I have seen a lot of sites with nice, centered navigation.

   I am hoping someone could point me in a good direction for a wp_noob to get this fracking thing centered so i can focus on more important things like trying to think of content!!! :)

   Site: http://www.bradystarr.com

2. peredur
   Member
   Posted 1 year ago #
   

   To centre a CSS block element, the usual way is to give the element a width and set the margins to auto: or set the margins equal and let the browser work out what the width should be.

   Either way, if the menu changes its width, you're lost. Especially if it gets wider. And since WP sites are expected to be dynamic with items being added, edited and deleted from menus at fairly regular intervals, centering kinda loses its appeal.

   However, if you really want to do it, you need to do something like this:

   #suckerfishnav {
     float: none;
     width: /* some number of pixels you need to find by trial and error */;
     margin: 0 auto;
   }

   Usual caveats about making changes in a child theme since it's the only recommended way.

   HTH

   PAE

3. rich_
   Member
   Posted 1 year ago #
   

   So you have a menu bar that you made with CSS and you need to center it?
   I have had some problems centering things myself and after days of searching i found something that works for me every time on all browsers.
   I'm not sure if the code will validate but it works.

   
#element {width: 1000px; margin-left: -500px; left: 50%;}

   You may have to change the position to absolute as well.

   Good luck.

4. bradystarr
   Member
   Posted 1 year ago #
   

   Thanks all, this may have been to advanced for me at the moment as I have a lot of other parts of the site to finish. I decided to move the navigation to the sidebar.
   I will come back to this eventually and let you know if it worked.

Topic Closed

This topic has been closed to new replies.