Change Primary Menu icon

[lbeerco-venango-pa-us]

Is there a way to change the primary menu icon that shows up when you switch views to tablet or mobile?We are developing a site for just mobile users. We are not using the Primary menu as a menu, it is going to be more of an emergency contact page and we would like to change the icon (3 lines) to an icon that is more appropriate.

 

Thank you.

[Andy]

Can you try adding this into Appearance > Customize > Additional CSS

.toggle-nav span {
	background: transparent;
}
.toggle-nav span:before {
	font-family: 'FontAwesome';
	content: "\f030";
	font-size: 30px;
	color: #fff;
	height: 30px;
	background: transparent;
}
.toggle-nav span:after {
	display: none;
}

In the example above I included a camera icon.
You can change this to a more suitable icon by changing this line:
content: "\f030";

List of available fonts here: https://fontawesome.com/v4.7.0/cheatsheet/

on the fontawesome page the code for camera icon is &#xf030 and you would just use the f030 part preceded with a back-slash e.g. content: "\f030";

[lbeerco-venango-pa-us]

Andy, you are the bomb! I have spent weeks trying to figure these things out. Thanks for all of your help today.

 

[Author]

Posts