Docs

[FabienR]

Hi guys!

I’m trying to custom my superfly menu ( <http://www.ensoulrecords.com/WP/ ). I want to change the hover on menu links. I want the text to stay the same color (#272727) and add an underline.

I did a bit of research and I came up with that code in my stylesheet :

/* Hover on menu */
#sfm-sidebar .sfm-menu li:hover > a {
     color: #272727 !important;
     text-decoration: underline !important;}

The thing is that there is also CSS embedded in the index (476) of the page by Superfly with this code :

#sfm-sidebar .sfm-menu li:hover > a {
    color: #fff !important;
}

It overrides my code. Also the underline doesn’t work.

I tried to put all that code in the superfly-menu.css, as specified in http://superfly.looks-awesome.com/docs/Getting_Started
but i can’t find it anywhere once i’m on my website, it doesn’t change the CSS embedded in the index.

So, I have 2 questions :

1) What code should I use and where I have to put it?
2) Where should I put all my custom for superfly to override what’s in the index?

I have included an image showing what the menu should look like in the end.

Thanks a lot for you’re amazing support!

Fabien

[Jade]

Hi Fabien,

Please try this code:

.sfm-pos-right #sfm-sidebar .sfm-menu li > a {
    border-bottom: 3px solid #fff;
}

.sfm-pos-right #sfm-sidebar .sfm-menu li:hover > a {
    color: #272727 !important;
}

.sfm-pos-right #sfm-sidebar .sfm-menu li:hover > a span {
    display: inline-block;
    border-bottom: 3px solid #272727;
}

Hope this helps.

[Author]

Posts