[Resolved] Styling questions

[kaiasgram]

Hello! On this site: http://www.sharonthompsonwilsonmft.com/

1. Client would like menu items to be center-aligned in the sidebar.
2. Wants current page (and hover) text in menu to be bold and a little larger.
3. More space between site title and tagline
4. Move site title and tagline down to be vertically center-aligned w/ the logo

I’m assuming these changes require custom css — I already have the plugin installed but don’t know the code (yet!). TIA, and I will save the code for future use.

[Tom]

Hi there,

1. This CSS will work:

.widget-area .main-navigation li {
      text-align: center;
}

2.

.main-navigation .main-nav ul .current-menu-item > a, .main-navigation .main-nav ul .current-menu-parent > a, .main-navigation .main-nav ul .current-menu-ancestor > a, .main-navigation .main-nav ul .current_page_item > a, .main-navigation .main-nav ul .current_page_parent > a, .main-navigation .main-nav ul .current_page_ancestor > a {
      font-weight: bold;
      font-size: 18px;
}

3.

.main-title {
      margin-bottom: 20px;
}

4.

.main-title {
      margin-top: 30px;
}

You may have to adjust some of the pixels to suit your needs 🙂

[kaiasgram]

Thanks so much Tom. Can I also get the menu items (text) to go bold and a bit larger when hovering?

And as you can see, centering the menu items worked but the parent “services” page is off-kilter because it has sub menu items. If there’s an easy fix I’ll try it but if not, I’ll do something else to work around it.

Thanks again for all this code, I really appreciate your help.

[Tom]

This should do it:

.widget-area .main-navigation li a:hover {
      font-weight: bold;
      font-size: 110%;
}

As for the centering – you may need to remove the arrow if you want it to align perfectly.

Hope this helps 🙂

[Sebastien]

Worked for me. Thx Tom.

[Tom]

No problem, glad I could help 🙂

[Author]

Posts