Edit “Site Menu”-button?

[Benjamin Astbury Øveraas]

Hi!

When viewing a Celestial Reloaded page on a mobile device, the regular menu is replaced by a clickable “Site Menu” button.

Is there any way to edit this button’s text, size and colours?

[Sushil Adhikari]

There is actually…first the menu button code is found in the style.css file around line 2189. Best to do this change with a custom CSS file at least and not directly with this file. The code that does the button looks like this:

/* Main Menu Toggle */
.menu-toggle {
	padding: 6px 10px;
	font-size: 11px;
	line-height: 1.428571429;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.menu-toggle {
    cursor: default;
}
.menu-toggle:hover {
	color: #5e5e5e;
	background-color: #ebebeb;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}
.menu-toggle:active,
.menu-toggle.toggled-on {
	color: #757575;
	background-color: #e1e1e1;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: linear-gradient(top, #ebebeb, #e1e1e1);
	box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
	border: none;
}

The part that you see like this:

background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(top, #f4f4f4, #e6e6e6);

….is CSS3 gradient colours, but you can remove that and do just a regular background colour if you wish.

[Benjamin Astbury Øveraas]

Thanks for your prompt and helpful reply 🙂

The only thing I can’t figure out from the codes you’ve posted, is how to change the text on the button. By default, it says “Site menu”. How can this text be changed?

[Sushil Adhikari]

Ah…that. One of two ways:

1. if you are using a child theme, you can simply retype the label you want
2. using language translation, you can override it.

The label in question is found in the header.php file around line 67 and looks like this:

The “Site Menu” is the part you are referring to. This is setup so that the theme can be translated to most if not all languages which these text strings are found and allows a person to translate/change it, usually with a program such as PoEdit.

If you are already using a child theme for your site, you can simply copy the header.php over into it and then change that “Site Menu” part.

[Benjamin Astbury Øveraas]

Terrific, thanks a bunch!

I’ve got all that I needed now 🙂

[Author]

Posts