Centering the Navigation

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I would like to center my navigation bar. (It is currently right aligned.) How can I re-align it to the center?
Photo of mel

mel

  • 12 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Melissa,

The Navigation alignment is part of the template style. There is no facility to re-align this with simple controls.

You may like to review your style selection. There are a few center alignment Nav templates within the library.
Photo of Sam

Sam

  • 18 Posts
  • 2 Reply Likes
Yes Melissa, Gop is right here, the only other way to have central navigation other than changing the Style Template is to create your own using HTML, this method would take a lot longer and is much harder if you not one for HTML coding but would allow you to keep the same Style. Would you mind sharing your URl so I can take a look at your navigation as it is
Photo of mel

mel

  • 12 Posts
  • 0 Reply Likes
Thank you both. I have not published yet, but am using the 'Squeaky Clean" style. Could alignment and spacing be altered with CSS if I had the Silver package?

I wish there was a "blank" style that would allow me to arrange the elements.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Melissa,

You've picked the ideal style for such an amendment as there are no other elements that it would affect.

Silver makes it easier to do sitewide changes but the ability without is still there. You have to add the amended CSS to each page of your site without Silver.

This is the default CSS for the menu of Squeaky Clean:


#menu ul {
float: right;
list-style: none outside none;
padding-left: 20px;
}


You can amend this to make it appear align centered and see how it goes but please do it in a test page first to verify before bringing it to your previously developed pages. You would need to set the float to left and set a left margin which would depend on the number of menu items that you have. I don't know any dynamic center alignment tricks for menus.

If you are doing this with FireFox then I can recommend downloading Firebug and you can see in real time the effect of changes without jeopardising your previously working code. If changes are successful in Firebug then you can just copy these and plug them into an HTML placeholder placed at the top of your page(s)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Melissa,

In order to use this code, we do recommend that you upgrade to Silver. This way you don't have to apply the code to each page. By using Silver, the Site CSS adds the code to each page automatically!
Photo of mel

mel

  • 12 Posts
  • 0 Reply Likes
I updated to Silver, but frustratingly the "float" parameter can only be left or right. I want to put the menu in the center. Any ideas?

Also, while I'm at it, I also want to move the main content container up. How can I do so in the CSS?

P.S. Thank you!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Melissa,

Center Aligned Menu:

You can amend this to make it appear align centered . You would need to set the float to left and set a left margin which would depend on the number of menu items that you have. It would be an iterative process by making adjustments and seeing what it looks like.. I don't know any dynamic center alignment tricks for such menus. Hoping that others will have that knowledge and jump in on this thread.

Moving the main content container:

The way I do this is a fidge to use the text placeholder. Apply whatever I need to in that with HTML and then adjust it with the margins setting. Top and Left with negative values. This is a way to move things out of the container rather than adjusting the container itself.Once again Firebug is invaluable with these adjustments.

If you are adding things like preformed widgets then place these in the HTML facility of the text widget. Of course you can use straight HTML to adjust the margins also in the HTML placeholder.

Finally check your end product with various screen size alterations because the container itself is optimised for use with the common screen sizes.

PS: I don't have any idea how this will affect the mobile presentation of the site. It's too new and i doubt many would have tried it with this in mind.

Melissa,

When you get this up and running would you mind doing a little write up of what you did. It's all valuable stuff for the knowledge of those wishing to approximate a liquid template. And thank you.
Photo of mel

mel

  • 12 Posts
  • 0 Reply Likes
I would be happy to. I have had some great success with using custom CSS and inline HTML to finesse things quite nicely. I even added the use of a downloadable font. It may be a few of days, but I will gladly post some tips.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That's really good Mel.

Hope all is going well with your menu alignment and container manip.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Melissa,

In the code that Gop provided above, you would need to add this line of code: text-align: center;

To shift your main content container up, please try this code:

#header {
margin-bottom: -50px;

}

I hope that helps!
Photo of mel

mel

  • 12 Posts
  • 0 Reply Likes
I have been able to accomplish quite a bit with the combination of overall CSS editing, adjusting margin settings as you suggest and adding custom HTML.

It would be great to have a completely empty template, however, with a head, menu and footer widget.

Additionally, the ability to integrate a blog (since yours is on the backburner and not very customizable) would be terrific. I tried using the Tumblr widget but none of the formatting passes through.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi mel,

The Yola blog can be customised quite a lot with css/html. I agree that the basic design is very limited and the overall facilites extremely limited but generally you can work your way though or around most of them.

The way to do this is to create a list of your top requirements and then see what can be done vs what can't be done. Then you can make the decision to go ahead or not.

PS: Not talking about the WP sophistication :(

Appearance with styling: Can
Various Facebook connections: Can
Scheduling of posts: Can't
Date change of posts: Can't (but can do a pseudo change)
Linkbacks: Can
Stable URI's: Maybe
Comments: Can (DISCUS and maybe FB which will mean the comments can be seen without expanding the post)
RSS feeding: Can
Subscribed to Advertisements in the blog post: Can't
Subscription: Sort of. (FB and password protected blog page)
Export the blog posts: Most definitely cannot!
Import blog posts: Can't