WordPress.org

Forums

The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

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

  1. cjc1867
    Member
    Posted 2 years ago #

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

    thanks

    Colin

  2. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    All the animations, or just the animated dropdown?

  3. cjc1867
    Member
    Posted 2 years 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 Nevins
    Forum moderator
    Posted 2 years ago #

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

  5. Andrew Nevins
    Forum moderator
    Posted 2 years 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 2 years 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 Nevins
    Forum moderator
    Posted 2 years 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 2 years 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.