WordPress.org

Support

Support » Themes and Templates » [Resolved] Remove animation from Main & sub menus

[Resolved] Remove animation from Main & sub menus

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    All the animations, or just the animated dropdown?

    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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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;
    }

    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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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).

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] Remove animation from Main & sub menus’ is closed to new replies.