Archived topic

menu item styling to create standalone 'buttons'

3 replies · Started by Jasper on September 17, 2016

Viewing posts 1–4 of 4

September 17, 2016 at 5:48 am #227205

I would like to create a menu in which each item looks like a separate button. So the background color of each menu item does not 'touch' each other, there should be space in between. A bit like in this example but here only the active menu item looks like a button. I want them all to look like a button and then i will style the active one with some other color. http://irisfysiotherapie.nl/

Is that possible, everything i tried always styles the whole background of the menu item, so the menu items next to each other are not like separate buttons.

Regards,

September 17, 2016 at 10:51 am #227264

Hi there,

First, set it so the menu background is transparent.

Then you can do this:

.main-navigation .main-nav ul li a {
     background-color: #222222;
     margin-right: 10px;
}

Let me know if you need more info :)

September 18, 2016 at 4:50 am #227404

thanks, and kind regards

September 18, 2016 at 10:12 am #227472

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.