Site logo

Archived topic

styling main navigation in the sidebar

3 replies · Started by Gillian on July 11, 2017

Viewing posts 1–4 of 4

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

Try this:

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

Hi Tom

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

No problem :)

This archived topic is closed to new replies.