Edit “Site Menu”-button?

Home Forums WordPress Themes – Premium Celestial (Celestial Reloaded) Edit “Site Menu”-button?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #15518

    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?

    #20505
    Sushil Adhikari
    Moderator

    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.

    #20506

    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?

    #20507
    Sushil Adhikari
    Moderator

    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.

    #15519

    Terrific, thanks a bunch!

    I’ve got all that I needed now 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.