[Resolved] Styling questions

Home Forums Support Styling questions

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #73511
    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.

    #73687
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #73760
    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.

    #74088
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #151388
    Sebastien

    Worked for me. Thx Tom.

    #151406
    Tom
    Lead Developer
    Lead Developer

    No problem, glad I could help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.