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!
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!
Hi john thanks for the response.
Where exactly would I put those codes?
Where exactly would I put those codes?
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),
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.
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.
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!
I know it's more tedious to do it this way but it's also simpler!
Try this,
Add to CSS just before headerNav:
Add class nav class at the beginning and end of ul:
Should work.
Steev
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
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.
Thanks for the help as well Steve, appreciate it.
(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
Then for your menu block