CSS for changing menu title

• 

  tremblaydonavan · Member · Aug 1, 2015 at 11:09 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I’m trying to change the menu title for just “menu” in ecto theme. At the moment it’s written Menu and Widgets and I just want menu. I have the prenium wordpress so I am supposed to be able to change the CSS. Is it possible to change that?

  http://www.vagabondmoments.com

  thanks

  The blog I need help with is: (visible only to logged in users)

• 

  pedger · Member · Aug 3, 2015 at 8:49 am

  • Copy link

  Hello

  This behaviour is set by the the Ecto theme creators, and there’s no easy way to change it if you have active widgets.

  as @siobhyb said once:

  Ecto chooses what text to display in the sidebar depending on whether you have a custom menu or widgets active on your site:

  * If you have a custom menu then it will only display ‘Menu.’

  * If you have active widgets then it will only display ‘Widgets.’

  * When you have both, ‘Menu & Widgets’ will be displayed.

  This is a part of Ecto’s design, and, if you’d like just ‘Menu’ to be displayed, you can deactivate your current widgets.

  With WordPress.com Premium, you’d have the option of adding custom CSS to change Ecto’s default text.

  You could also consider another theme for your needs. With Saga, for example, you can add widgets to a sidebar and have ‘Menu’ text in the header area.

  As she said, there’s a way to change it via CSS, but I tried and is hard to get the same style (borders and menu icon) due to the way that the Ecto Theme is created.

• 

  ehtis · Staff · Aug 3, 2015 at 11:44 am

  • Copy link

  Did some tinkering and came up with two approaches here. Both will slightly affect the appearance of the menu button.

  In the first one, I’m going to hide the existing button text, hover effect will be preserved. Text moves to the left but is transparent:

  .navbar .navbar-action a{
  	color: transparent !important;
  	line-height: 0;
  	text-indent: -118px;
  }
  .navbar .navbar-action a:after{
  	content: "Menu";
  	line-height: initial;
  	color: white;
  }
  .navbar .navbar-action a:hover:after{
  	color: #57656F;
  }

  The following is a cleaner approach, don’t have the hover effect:

  .navbar .navbar-action a{
  	visibility: hidden;
  }
  .navbar .navbar-action a:after{
  	content: "Menu";
  	color: #fff;
  	visibility: visible;
    	display: inline-block;
    	padding: .75em 1em;
    	border: 1px solid;
    	border-radius: 3px;
    	line-height: 1.5;
  }

• 

  tremblaydonavan · Member · Aug 3, 2015 at 12:17 pm

  • Copy link

  Thanks Ill try that!