Customize or remove menu button on mobile – storefront theme

Hi,

I’ve been trying to (preferably) modify the Menu button that appears on Mobile, or, failing that, remove it from the storefront theme.

I am using storefront_for_page_builder child theme (from Pootlepress) which has been modified with a few custom CSS and php additions to pair the stuff in the storefront theme I don’t need.

I have succeeded in removing the text inside the button with a modification to the
child functions.php file.

add_filter( 'storefront_menu_toggle_text', 'jk_storefront_menu_toggle_text' );
function jk_storefront_menu_toggle_text( $text ) {
	$text = __( '' );
	return $text;
}

Not perfect as there still seems to be some space left for the text inside the button frame, but will do for now.

I would like to remove the frame around the hamburger icon, change the color of the hamburger icon itself and adjust its location in the header.

I tried out the Responsive Menu plugin which will definitely do what I want, but in order to use it I would need to either remove the existing navigation button or (possibly) to tell the RM plugin the internal theme name of the menu that it is replacing.

Any help would be much appreciated!

Custom CSS for reference:

/* disable the woocommerce default sorting and showing results feature */
.woocommerce-result-count, .woocommerce-ordering {
  display: none;
}  

/* remove sidebar on shop page*/
.woocommerce div#secondary {
  display: none;
}  

/* Sitewide changes -----------------------------------------------------------*/

/* Header area */
.site-header {
   padding-top:0.5em;
}

.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
margin-bottom: -45px;
}

/* This makes the header transparent so that the background image shows through */

.site-header {
  background-color: transparent;
}

/* This removes the bottom border */

.hentry {
   
    border-bottom: 0px solid rgba(0, 0, 0, 0);
}

/* This removes the site footer */

.site-footer {
  
  display: none;
  
}

• This topic was modified 5 years, 11 months ago by bidoowee.