WordPress.org

Forums

evolve
[resolved] Remove animation from Main & sub menus (8 posts)

  1. cjc1867
    Member
    Posted 1 year ago #

    How can you get rid of the animation from the menus?

    thanks

    Colin

  2. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    All the animations, or just the animated dropdown?

  3. cjc1867
    Member
    Posted 1 year ago #

    I don't like the slot machine effect on the main menu or the dropdown and would like to remove it and just have a simple colour change.

    I have commented these lines out in the style sheet but not perfect.

    .link-effect a span {
    	/*display: inline-block;
    	position: relative;
    	-webkit-transition: -webkit-transform 0.3s;
    	-moz-transition: -moz-transform 0.3s;
    	transition: transform 0.3s;*/
    }
    .link-effect a span::before {
    	position: absolute;
    	top: 100%;
      height:100%;
      width:110%;
    	/*content: attr(data-hover);
    	font-weight: 700;
    	-webkit-transform: translate3d(0,0,0);
    	-moz-transform: translate3d(0,0,0);
    	transform: translate3d(0,0,0);*/
    }

    Thanks

    Colin

  4. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Does that theme come with a "Custom CSS" or similarly named section?

  5. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    If the theme doesn't have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin

    Then use its "CSS Code" section of the dashboard to hold your CSS modifications.

    To get rid of the slot machine effect try adding this:

    .link-effect a:hover span,
    .link-effect a:focus span {
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
    }
  6. cjc1867
    Member
    Posted 1 year ago #

    It certainly does but I have set it up as a child theme.

    Further playing and got it to work, I commented the wrong bits out.

    .link-effect a span {
    	display: inline-block;
    	position: relative;
    	/*-webkit-transition: -webkit-transform 0.3s;
    	-moz-transition: -moz-transform 0.3s;
    	transition: transform 0.3s;*/
    }
    
    .link-effect a span::before {
    	position: absolute;
    	top: 100%;
      height:100%;
      width:110%;
    	content: attr(data-hover);
    	font-weight: 700;
    	/*-webkit-transform: translate3d(0,0,0);
    	-moz-transform: translate3d(0,0,0);
    	transform: translate3d(0,0,0);*/
    }

    So now in my child theme's style sheet how can I get rid of these transforms & transitions or switch them off? Can I simply put none at the end of each one?

    Thanks

    Colin

  7. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    So now in my child theme's style sheet how can I get rid of these transforms & transitions or switch them off?

    Oops, ignore my advice about the Custom CSS plugin and put that code into your Child Theme style.css file (at the bottom).

  8. cjc1867
    Member
    Posted 1 year ago #

    OK, I have added the code above to my stylesheet and changed the values to none.

    .link-effect a span {
    	-webkit-transition: none;
    	-moz-transition: none;
    	transition: none;
    }
    
    .link-effect a span::before {
    	-webkit-transform: none;
    	-moz-transform: none;
    	transform: none;
    }

    Working perfectly now.

    Thanks Andrew for holding my hand there, I was getting a bit lost but now it's been resolved.

    Colin

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.