Move sidebar to left for all pages

(PS https://postimg.org/gallery/meoqtzkm/ )

Sounds like perhaps a cache is running on your site or browser, which is probably why the change wasn’t immediately apparent.

I think this is the CSS you need:

.home-iconmenu a {
    padding: 0;
}

Sorry for the guesswork, if I could see the site it would be much faster for me to come up with the correct CSS.

Let me know how that works for you.

-Kevin

Oh, I didn’t think of the site itself being cached! D’oh. Am using w3 total cache – have deactivated it for now!

So, setting the padding to 0 also gets rid of the hover effect; the background colour change seems only to apply to that padding. I appreciate you’re working blind here! So here, I’m close to finished with the site anyway – am just trying to iron out a problem with an event plug-in. I can go live without the hover effect and then send you the link – hopefully tomorrow. Thanks so much for your patience, you’re brilliant! ??

(Correction: The hover effect IS a background colour change, nothing to do with padding really. I understand now! ?? So if there’s a way to add an overlay to .home-iconmenu, that would give me what I need – but maybe that’s not a standard attribute or value or whatever?)

• This reply was modified 7 years ago by Tracy.

Try just adding only this CSS:

.home-iconmenu a {
    padding: 0;
}

And remove the previous CSS that changed the background color. This should keep the hover effect, but get rid of the outside space.

If this doesn’t work, lets just come back to this when I can view the site. Then I’ll come up with a solution much more quickly.

-Kevin

Hi Kevin,

Yeah, that’s what I’d done, but the hover effect doesn’t work because it changes the background of the link, which is obscured by the text image itself. When the padding is on, you can see the background colour change on it, but not on the text image since it’s coloured anyway. (If I was using a true icon on a transparent background, I’d see the colour change – but I’ve got white text on different-coloured backgrounds, where those colours correspond to event categories.)

…So I think I would need to add an overlay effect with reduced opacity, rather than a background colour change – it seemed it should be simple so I did find a tutorial on adding overlays and tried to figure out the CSS myself, but it didn’t work. I wasn’t sure how to handle the “.home-iconmenu a” v “.home-iconmenu img”.

The site’s live now in any case! Which should help. ?? https://www.lltca.com. Thanks!

• This reply was modified 7 years ago by Tracy.

Try replacing all of the previous CSS I sent you with this:

.home-iconmenu a:hover {
    opacity: .6;
}

.home-iconmenu a {
    padding: 0;
    transition: opacity .4s;
    -webkit-transition: opacity .4s;
    -moz-transition: opacity .4s;
    -o-transition: opacity .4s;
}

Let me know if that works for you

-Kevin

Yes, that’s perfect! ?? Thanks so much! If I get asked to do another web build I’m going to buy a Kadence membership; your support is just terrific. I’ve a couple of small tweaks left to make but think I can figure those out with online tutorials. Have a great weekend!