Archived topic
styling main navigation in the sidebar
3 replies · Started by Gillian on July 11, 2017
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.

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 :)