Active menu styling

[ani7ruddha]

I have this Your text to link here…

I want to make the active menu exactly how it is.

I have done it anyhow as of now and looks fine.

But when you scroll the page down a blue stripe will come below that orange stripe we dont want that

[sensationikke]

The blue stripe is there because the image used is like that: http://www.wisepuppet.com/wp-content/uploads/2014/07/ative.jpg

How about changing the image? You’ll have to give up the blue line before you scroll though.

If you only want the image to be without the blue line after there has been scrolled, I guess you’ll have to look for a javascript solution

[ani7ruddha]

How that can be done by javascript ?

because I want that blue stripe shall go off once we start scrolling

[Paulie_D]

You have to stop using this image…

.navbar .nav > .active > a, 
.navbar .nav > .active > a:hover, 
.navbar .nav > .active > a:focus {
background: url('http://www.wisepuppet.com/wp-content/uploads/2014/07/ative.jpg') repeat-x bottom left;
}

and find some CSS styling that works the same way on your active link. It really shouldn’t be hard.

[ani7ruddha]

@Paulie_D This was intially what I did but by that I cant get blue section initially as its now

[Paulie_D]

Couple of inset box-shadows would work

http://codepen.io/Paulie-D/pen/Lapuy

[Author]

Posts