Support » Theme: evolve » Menu Customization

  • Resolved boldlygo

    (@boldlygo)


    Hello,

    I’m having trouble figuring out how to customize the menu in the Evolve theme. There are are two things that I want to change:

    1. Make the top of the menu the same color as the rest of the menu. As it is, the top of the menu is always a few shades lighter than the rest of the menu.

    2. Get rid of the ‘scroll’ effect when you hover over menu items. I like the color and text change, but I do not like the scroll effect.

    Website: treebrains.com

    Thank you or your help!

Viewing 15 replies - 1 through 15 (of 15 total)
  • You are welcome,

    The scrolling appears to be implemented via ajax, a relatively complex technology.In the absense of a buult-in customizer, it’s likely best to contact the theme author https://wordpress.org/themes/author/romik84/ or the premium version theme vendor https://theme4press.com/evolve-multipurpose-wordpress-theme/

    Good luck

    Thank you Martin. I was able use information from the theme4press forums to figure out how to solve the fist problem.

    It’s an easy fix. Putting this: .menu-header {background: #00CC00!important;} in the custom css field under theme options overuled the light color band that was running across the top of the menu bar.

    However, I’m still having trouble figuring out how to get rid of the scroll effect.

    I figured out how to disable the scroll animation that was occurring when hovering over the menu items. For anyone else who is interested in doing this, you simply need to remove these lines from underneath .link-effect a span:

    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;

    Good luck with that! 🙂

    I’m trying to do exactly what you’ve done with your website’s menu. A couple of questions:

    1) In the Evolve “Theme Options” do you have the “Disable main menu Hover Effect” enabled or disabled?

    2) Did you remove

    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;

    from the parent theme style.css or did you copy the original to a child theme and then remove the lines noted above?

    I’ve tried a bunch of combinations but am still having issues. Thanks for your help!

    Hello,

    I do not have the box checked for “Disable main menu Hover Effect”. Just to double check, I added the lines back and the scroll effect was occuring again. The change was made to style.css.

    This is what I have:

    .link-effect a {
    	overflow: hidden;
    	padding: 8px 10px!important;
    	height: 3.7em!important;
      line-height:2.5em!important;
      display: inline-block;
    }
    
    .link-effect .sub-menu a {
    	padding: 4px 10px!important;
    	height: auto!important;
      line-height:1.9em!important;
    }
    
    .link-effect a span {
    	position: relative;
    	display: inline-block;
    }   
    
    .link-effect .sub-menu a span {
    	display: block;
    }   
    
    .link-effect a span.arrow {width:10px;}
    
    .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);
    }
    }

    You can see the final website here: http://www.treenook.com/

    Excellent! That worked. Thanks for your help!

    For anyone else who might come across this thread in the future: note that there is an extra “}” at the end of the quoted code above. Remove it when you paste the code into your style.css.

    I am using the evolve theme and would like to disable the short menu that shows up below the main menu. I am assuming this is to simplify menu use on smaller devices, but I would like to get rid of it. Is there a way to do that… so that the menu shows up as a regular menu across the top on every device?
    http://saskfalconersclub.com/wordpress/

    Hi krushen,

    Thanks for writing in,

    You can select a simple menu, which you can find under Appearance > Menus > Menu Settings uncheck the box of primary menu. As per shown here: http://prntscr.com/7llqh0.

    Thanks.

    Well, this worked for a while, but now the scrolling effect has returned. Any idea why? I haven’t added anything else to the style.css.

    new.hollrahllc.com

    Nevermind. It appears my style.css is no longer working. That’s an issue for a different thread.

    I found a really easy way to kill this. Just go to your custom css, copy and paste this code.

    /*/hover effect removal/*/
    .link-effect a span {
    	transition: none !important;
    }

    Regards,
    http://www.techhelp.ca

    Hi everyone.

    really lost. I am trying to change the background of my menu bar and can’t seem to find how to change the background of the menu. its currently a blackish blueish would like it to be more grey/blackish.

    Any help is greatly appreciated.

    Thanks guys!

    mcdevi90

    i had the same question and was informed of the following:

    Go to Appearance -> Theme Options -> Styling -> Menu
    Set the custom menu color.

    Hello – I’m new to wordpress and have selected Onetone to work with.

    I’ve taken out the section ‘ TEAM ‘ where it shows the four people,

    and since that is gone, so too should the link in the horizontal menu bar
    at the top of the webpage that says TEAM, where it takes you directly to that section – what I’m saying is, where I’ve taken out the graphic section TEAM, I also want to take out the header link of TEAM that would take you there,

    but for the life of me and all manner of searching for the answer,
    I can not figure out how to remove a menu item from that navigation bar.

    Could someone please explain how I can do this in Onetone ?

    THANK YOU 🙂

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Menu Customization’ is closed to new replies.