[Resolved] styling main navigation in the sidebar

Home Forums Support [Resolved] styling main navigation in the sidebar

Home Forums Support styling main navigation in the sidebar

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #347888
    Gillian

    I’ve put my main navigation menu in the side bar so it is vertical and I wanted to make the menu items look like buttons. I’ve almost achieved it with this bit of css

    .main-nav a {
    margin-bottom: 5% !important;
    text-align: center !important;
    border:solid #00991c 2px;
    border-radius: 26px;
    background-color: #e6ffea;
    }

    But I’ve got a problem with long wording where the buttons are very big.
    screen grab of buttons

    I’ve put a <br/> in where I want the line to break but it doesn’t seem to have had any effect. I also tried altering the padding but it didn’t impact on the space between the lines.

    Is there a way to narrow the space between the lines? Or is there a better way of achieving the look?

    Thanks

    #347979
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .main-navigation .main-nav li a {
        line-height: normal;
    }
    #348110
    Gillian

    Hi Tom

    I had to add !important to get it to work, but it is now – thanks.

    #348253
    Tom
    Lead Developer
    Lead Developer

    No problem 🙂

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