How do I change the spacing of the page tabs?
-
Hello,
How do I change the spacing of and centre the page tabs? I am using the fresh and clean theme.
Thanks
LucyThe blog I need help with is: (visible only to logged in users)
-
This will do it for centering.
.menu { text-align: center; } .menu ul { display: inline-block; }For changing the spacing of the tabs, add this and then adjust the left/right padding as desired. The first value (0.6em) is the top/bottom padding and the second value (1em) is the left/right padding. You can also use decimals such as 0.9em or 1.2em, or even 1.5692em as needed.
#access a { padding: 0.6em 1em; } -
Hello,
Thank you very much for your reply. I tried it and it has centred the navigation label in my menu, which is down the right hand side.
Is it possible to centre the page names which are situated directly under the header?
Many thanks
Lucy -
This will center all page titles.
.entry-title, .entry-title a { text-align: center; }And I’m sorry if I misread, but I was thinking that you wanted to center the menu tabs in the top navigation and then adjust the spacing in between them
-
Hello again!
Thank you for this. Sorry it is really difficult to be discriptive when writing instead of talking, I meant the page tabs/headings such as ‘Home’, ‘Contact’ etc, which appear under the header. I have quite a few pages so they appear in two rows, and I thought it would look nice if they can be centred?
Sorry for the confusion
Many thanks
Lucy -
Ok I need the link to the site you are talking about because the one linked to your username only has about 4 tabs, so obviously I’m not working on the correct site.
-
-
First thing I would recommend is to look into creating a custom menu for your site and then organizing some of your tabs into submenus (dropdowns). There really isn’t a way to make that all cleanly go to one single line and typically the menu item centering code I gave will blow up when the menu goes to a second line.
Secondly, the theme you are using is what is called a “reactive” design which means it is meant to automatically adjust for different screen widths and browser widths. Grab your browser window while on your site and narrow and widen it to see what I mean. So, on some widths of displays, or if someone has their browser window set narrow, the menu will go to two lines, or possibly even to three or more. On my iPhone it goes to 5 lines.
Long menu labels like some of them you have can also be an issue and you might want to think about those and see if you can shorten them and still identify the content behind them. Here would be my suggestions (but of course it is always up to you).
Home
About
Artists
Place & Landscape
Dance
Music
Drama
Calendar Customs
Visual Arts
Music Roundabouts
Contact -
-
- The topic ‘How do I change the spacing of the page tabs?’ is closed to new replies.
WordPress.com Forums 