WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. cjc1867
    Member
    Posted 4 months ago #

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

    thanks

    Colin

  2. Andrew
    Forum Moderator
    Posted 4 months ago #

    All the animations, or just the animated dropdown?

  3. cjc1867
    Member
    Posted 4 months 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
    Forum Moderator
    Posted 4 months ago #

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

  5. Andrew
    Forum Moderator
    Posted 4 months 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 4 months 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
    Forum Moderator
    Posted 4 months 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 4 months 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

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.