Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 934
  • Last Modified:

CSS advice for menu text size

I want to make the headings in the menu on this wordpress site in a larger text: http://www.whitbyapartment.com/

for example the following links):

About Whitby
Guests comments
Activities in Whitby
Things to do nearby Whitby

need to be bigger than the rest of the links in the righ hand side menu.


  • 2
1 Solution
Ray PaseurCommented:
This appears to be built from the Wordpress 2010 theme.  You might try making the text bold in the navigation bar.

In the right sidebar, the HTML looks like this in the code snippet.  Since there is already a class for "children" it might make sense to modify the CSS to make the font-size smaller.  Maybe something along these lines...

.children { font-size:80%; }

<li class="page_item page-item-6"><a href="http://www.WhitbyApartment.com/?page_id=6">Activities in Whitby</a>
<ul class='children'>
	<li class="page_item page-item-292"><a href="http://www.WhitbyApartment.com/?page_id=292">Beaches at Whitby</a></li>
	<li class="page_item page-item-12"><a href="http://www.WhitbyApartment.com/?page_id=12">Drinking</a></li>
	<li class="page_item page-item-8"><a href="http://www.WhitbyApartment.com/?page_id=8">Eating out</a></li>
	<li class="page_item page-item-314"><a href="http://www.WhitbyApartment.com/?page_id=314">Fishing in Whitby</a></li>
	<li class="page_item page-item-186"><a href="http://www.WhitbyApartment.com/?page_id=186">Museums</a></li>
	<li class="page_item page-item-50"><a href="http://www.WhitbyApartment.com/?page_id=50">The Dracula Experiance</a></li>
	<li class="page_item page-item-10"><a href="http://www.WhitbyApartment.com/?page_id=10">Walking</a></li>
	<li class="page_item page-item-55"><a href="http://www.WhitbyApartment.com/?page_id=55">Whitby Abbey</a></li>
	<li class="page_item page-item-274"><a href="http://www.WhitbyApartment.com/?page_id=274">Whitby Steam Bus</a></li>
	<li class="page_item page-item-279"><a href="http://www.WhitbyApartment.com/?page_id=279">Whitby Walks</a></li>

Open in new window

HTH, ~Ray
Beverley PortlockCommented:
Try adding this to the bottom of styles.css

#pages-3 ul li a {
    font-size: 2.0em;

#pages-3 ul li ul li a {
    font-size: 1.0em;

Open in new window

Set the font sizes to suit your needs.
GarveyJAuthor Commented:
bportlock your solution worked perfectly, thanks.

Ray, your suggestion didn't seem to make a difference at all. (could be my lack of CSS knowledge doing it wrong!)
Beverley PortlockCommented:
Good to hear your problem is sorted. Thanks

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now