• How can I keep the links from moving to the side on hover in both the sidebar widget and the footer widget.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • open the CSS file, and find the widget items, or you can also try to add the code to CSS in theme options:

    #secondary a,
    #secondary-2 a, …where it says
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;

    try changing it to:
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: nones;
    -o-transition: none;
    transition: none;

    there might be another one, look at the CSS file. Make the edits in the theme options though, don’t edit the file because you will lose it on an update unless you have a child theme in place.

    …and don’t copy my typos. :-b

    and then there is this below it. (it’s interesting that the transitions are on the “normal” link style, and the “hover” code, the style is “none” (i.e. it’s backwards really)

    #secondary a:hover,
    #secondary-2 a:hover,
    .footer-widgets a:hover,
    .header-widgets a:hover {
    color: #7a9cad;

      text-decoration: none;

    padding-left: 5px;
    }

    • This reply was modified 8 years, 3 months ago by donnaWPadmin.
    Thread Starter cmacintyre

    (@cmacintyre)

    Ok.. newbie here. Sorry if this is very elementary, but how/where do I open the CSS file. I see an option for additional CSS and have played (minimally) around in there, but it didn’t seem to make any difference.

    Thanks so much for your help!

    Hello,

    You can’t find css file then add above two css in additional css area.

    Go to Appearance -> customize -> additional css

    Thank You

    savan is right. If you edit CSS anyway, you will lose it on the update. We just use the file to find the correct class and ID #’s. Then edit where he said. You have to know what to put before you can use that area.

    Did you try to just add that code to the additional CSS panel? You can also put !important before the semi-colon at the end…to give it highest priority. (because they are called “cascading” style sheets, right? priorities are everything…)

    Thread Starter cmacintyre

    (@cmacintyre)

    In additional CSS, I entered:
    #secondary a,
    #secondary-2 a,
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;

    #secondary a:hover,
    #secondary-2 a:hover,
    .footer-widgets a:hover,
    .header-widgets a:hover {
    color: #7a9cad;
    text-decoration: none;
    padding-left: 5px;
    !important
    }

    I get an error on line 4: -webkit-transition: none; complaining about the colon after transition

    I updated and published anyway with no difference at all to the widget links. In particular,
    “Certified Agile Leadership”, “Scrum@Scale Certification”, “Agile Boot Camp”, and “Scrum for Work”

    The only error I see is that the semi-colon on the last one goes after !important, not before it.

    This is for the Evolve theme, right? And you have the latest version? I’ll take a look at the file. If the code you tried didn’t work, make sure you remove it.

    I really honestly don’t know why you want to remove it. I like it. Let me check the file, and if someone doesn’t post back before me, …I’ll let you know. Sorry.

    Thread Starter cmacintyre

    (@cmacintyre)

    Changed the semi-colon to be after the !important. No difference. It’s still complaining about the line:
    -webkit-transition: none;
    complaining about the colon after the word transition
    Explanation is:
    “Expected a ‘FUNCTION’ or ‘IDENT’ at line 3 col 20.

    Yes. Using Evolve and I believe it’s the latest version.

    We want to remove the unnecessary motion of the link. No need for unnecessary motion on a website.

    Thanks so much for your continued help.

    unfortunately I don’t have time to go back and get your CSS today. But here is how you do it:
    http://onezeronull.com/2016/10/06/disable-css-transitions-and-animations-temporarily-or-permanently/

    and here is another reference: https://stackoverflow.com/questions/6634470/disable-turn-off-inherited-css3-transitions

    But there could be something entirely different in the stylesheet I missed. I haven’t looked at the actual stylesheet, just the “inspect” feature. I’m sure the theme author will post eventually…he usually does.

    Thread Starter cmacintyre

    (@cmacintyre)

    Donna, thanks and no worries. I learned HTML 20 years ago when that was basically all we had, but never learned CSS and am not really comfortable messing around in it. If you do get a chance, I’d appreciate your looking at the code. And, as you say, hopefully the theme author will respond as well.
    Thanks!

    Welcome!!

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Stop widget links from moving on hover’ is closed to new replies.