Search code examples
csswordpressstylesborderstylesheet

Menu 'border-right: none' not working

I have added menu separators on this page http://79.170.40.241/refthecoffeefactory.co.uk/home

I have also added the following to remove the boarder on the far right of the menu, although it doesn't seem to work.....

#navigation ul.nav > li.menu-item-56 {
    border-right: none !important;

}

Any ideas as to why?

Solution

  • Note: just took a further look. Your border is on the "a" tag, not the table. Still, my previous answer follows:

    Looks like it's being overridden by other styles. Looking at your style chain, you have many overlapping styles and use !important a lot. There are ways to isolate that particular element, but you might want to revisit all your styles taking specificity and inheritance into account. Here's a site that explains it simply and effectively: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

    Also, to find out which style is specifically breaking it, with Firefox or Chrome, right-click and inspect element. You'll see that the one where you specify no border is overridden (it's crossed out).