Centered tabs and tab-bar like Apple.com

- 3 Posts
Ice Cream Reply #1, 19 years, 5 months ago

I would like to use Wayfinder with a page design similar to www.apple.com. There would be top main tabs and a sub-level tab-bar directly underneath it, and both centered.

____| TAB 1 |__| TAB 2 |__| TAB 3 |__| TAB 4 |__| TAB 5 |__| TAB 6 |____
_____submenu___another item___yet another___and again___item 5___item 6_____

How would I set Wayfinder to do the sub-menu? I’ve only been working with MODx for 1 week.

Also, how would you center the tabs? I’ve got the top tabs working, but they are left-aligned, not centered.

Thank you!!!

Ice Cream
- 144 Posts
andrazk Reply #2, 19 years, 5 months ago
For centering, envelope the tab menu into a div and set the margin to auto.

Put this into your CSS
```
div.centerThis {
  margin: 0px auto;
}
```
And code this into your page
```
<div class="centerThis">#Put menu content here#</div>
```
But for proper menu rendering and coding, I don’t have an example on me. Maybe someone who did it already will post it.
But essentially, find a working solution on net, copy the code and break it down to WayFinder templates.