How to make the auto-nav menu center-justified?

Permalink
Hi,

This may be a simple thing, but I couldn't find the answer anywhere and I'm very new to concrete5 and php, but after making a horizontal auto-nav menu, the menu is automatically right-justified.

How do I make it so that the menu is centered in its block? Also, I made the menu through the page defaults so that I could use it on all my pages. Here is the website(www.irieislerestaurant.com)

I really appreciate any help, thanks!

View Replies: View Best Answer
JohntheFish replied on at Permalink Reply
JohntheFish
You could put it in any block level element (such as a div), set both margins to auto:

<div style="margin-left: auto; margin-right: auto; width:80%;">
...
...
</div>


(You need to adjust the width to fit your menu, you could also give it in pixels eg. 700px)

Or set the css in a style sheet

.menustuff {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}


Then for your menu block
<div class="menustuff">
...
...
</div>
hnevins replied on at Permalink Reply
Hi john thanks for the response.

Where exactly would I put those codes?
JohntheFish replied on at Permalink Best Answer Reply 1 Attachment
JohntheFish
Sorry, I assumed too much background knowledge.

I was referring to manipulating the html and styles for the theme.

For now, forget about that and add the css to the 'Design' of the autonav block on your page. Its a quick and easy way is to add it to, but in the long run perhaps more effort to maintain. Edit page > highlight block > Design > CSS tab.

In the css tab (and see attached screen grab),
margin-left:auto;
margin-right:auto;
width:80%;


Unfortunately it needs a width to work (I have edited my reply above) and you will need to tweak the width to fit your menu, and also adjust it if you add more items to the menu. I have used %, but you can just as easily use pixels eg. 'width:700px;'.

Rather than mess about doing this for every page, you could add it to a global scrapbook then put the scrapbook block on your pages. That will simplify maintenance if/when the menu content changes.
Jackiethepeapod replied on at Permalink Reply
Jackiethepeapod
You are awesome John! Thank you for dumbing it down for us, people like me need it that way!

I know it's more tedious to do it this way but it's also simpler!
Steevb replied on at Permalink Reply
Steevb
Try this,

Add to CSS just before headerNav:

.nav{width:80%;margin:0 auto;height:30px;padding:5px 0 0}



Add class nav class at the beginning and end of ul:

<div class="nav"><ul class="nav-header">
</ul></div>


Should work.

Steev
hnevins replied on at Permalink Reply
Ah thanks! That John worked perfectly! I also took your advice and used the global scrapbook for that menu on each page. Works great now.

Thanks for the help as well Steve, appreciate it.