Hi
Is it possible to change the icons in the responsive menu on the Vantage theme?
I’m mainly interested in the close menu icon (currently “X”). Ideally, I’d like to replace this with the same icon used to open the menu (the three dashes). If it’s not possible to replace it with an icon, is it possible to change the font used for it/font size? I’ve changed the font for the rest of the menu, but don’t know the selector for the close button.
Also, I’d like to replace the back arrow on the second level menu, with “” used to get to the second level menu. Is that possible?
Lastly, is it possible to remove the word “menu” from the open menu button (not from the responsive menu itself)? I saw this question’s been asked before and noted that it might not be easy to do – I wonder whether that’s changed.
I hope all that makes sense. Thanks in advance for you help!
P.S. On the SiteOrigin site, whenever I search the support forums and go to a second page of search results, the site removes the spaces between my search terms, which essentially means I can only get one page of search results!
*Also, I’d like to replace the back arrow on the second level menu, with “” used to get to the second level menu. Is that possible?
[Not sure why my posts aren’t coming out as I typed them!? Perhaps because I’m using the greater than/less than symbols in my post? Anyway, I’d like to replace the back arrow with the less than symbol.]
Hi dyper
Thanks for reaching out.
You can try the following for the close X, insert the following under Appearance > Custom CSS:
/* Mobile Menu */ .mobile-nav-frame .title .close:before { font-family: 'FontAwesome'; font-size: 14px; content: "\f00b"; color: #fff; display: block; position: absolute; background: #161616; top: 7px; right: -5px; padding: 8px; } .mobile-nav-frame .title .back:before { font-family: 'FontAwesome'; font-size: 20px; content: "\f104"; color: #fff; display: block; position: absolute; background: #161616; top: 5px; left: 4px; padding: 8px; }Hi Andrew
That’s excellent, and has worked perfectly. Many thanks for the quick response.
On the last question, about removing the word “menu” from the open menu button – is that possible?
Best
D
Unfortunately not as far as I know, at least with CSS. I don’t know of a way that we can indent or hide the text in that link without doing the same to the icon.
However if you make use of a child theme we can filter the mobile menu text by placing the following in a functions.php in a child theme:
/** * Edit the premium mobile menu text. */ function vantage_child_mobilenav_text($text) { return $text = array( 'navigate' => __( 'Custom Menu Title', 'vantage' ), ); } add_filter('siteorigin_mobilenav_text','vantage_child_mobilenav_text');Change my string Custom Menu Title, if you remove it just leave the two inverted commas.
If you need a child theme to start out with, here is one:
https://siteorigin.com/wp-content/uploads/2015/01/vantage-child-vanilla-enqueue.zip
Keep in mind that when you activate a child theme your Customizer and menu settings will reset. This is normal.
Want to know more about filtering in child themes?
http://themeshaper.com/2009/05/03/filters-wordpress-child-themes/
Brilliant, thanks Andrew. I’d been meaning to get around to using a child theme, so this has given me the reason.
Thanks again.
D
For sure, glad we could help.