- \r\n
- \r\n
The mobile menu links in Magento are generated from the header and footer links of the main store view:<\/p>\r\n
![\"magento_how_to_manage_mobile_links_1\"](\"\/help\/wp-content\/uploads\/2015\/04\/magento_how_to_manage_mobile_links_1-83x300.jpg\")
<\/a>\r\n<\/li>\r\n- \r\n
The main code that defines the mobile menu has the class <div class=”swipe”><\/strong>. It is added to header.phtml<\/strong> file in app\/design\/frontend\/default\/themeXXX\/template\/page\/html<\/strong> directory on your server:<\/p>\r\n
![\"magento_how_to_manage_mobile_menu_2\"](\"\/help\/wp-content\/uploads\/2015\/04\/magento_how_to_manage_mobile_menu_2-300x112.jpg\")
<\/a>\r\n<\/li>\r\n- \r\n
In this code you can see the main sources which define the menu links on mobile:<\/p>\r\n
- \r\n
- \r\n
the Home<\/strong> link is located in the same code of the header.phtml<\/strong> file:<\/p>\r\n
<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->__('Home') ?>" class="home-link"><?php echo $this->__('Home') ?><\/a><\/pre>\r\n<\/li>\r\n- \r\n
My Account<\/strong>, My Whishlist<\/strong>, Log In<\/strong> and Log Out<\/strong> menu links can be found in the customer.xml<\/strong> file in “app\/design\/frontend\/default\/themeXXX\/layout”<\/strong> directory on your server.<\/p>\r\n<\/li>\r\n
- \r\n
My Cart<\/strong> and Checkout<\/strong> links code is in the checkout.xml<\/strong> file in the same directory:<\/p>\r\n
![\"magento_how_to_manage_mobile_menu_3\"](\"\/help\/wp-content\/uploads\/2015\/04\/magento_how_to_manage_mobile_menu_3-300x146.jpg\")
<\/a>\r\n<\/li>\r\n- \r\n
Check this tutorial for more details on how to manage header links in Magento<\/a>.<\/p>\r\n<\/li>\r\n
- \r\n
the Currency<\/strong>, as well as the Language<\/strong> link, are located in header.phtml<\/strong> file:<\/p>\r\n
\r\n<?php echo $this->getChildHtml('currency_2') ?>\r\n<?php echo $this->getChildHtml('store_language_2') ?><\/pre>\r\n<\/li>\r\n- \r\n
Note:<\/strong> If you delete these links from the swipe menu code, they will still be displayed on the main store view.<\/p>\r\n<\/li>\r\n
- \r\n
About Us<\/strong>, Customer Service<\/strong> and Privacy Policy<\/strong> are Magento static block links which can be edited from admin panel in CMS-> Static blocks->Footer Links<\/strong> section:<\/p>\r\n
![\"magento_manage_mobile_menu_4\"](\"\/help\/wp-content\/uploads\/2015\/04\/magento_manage_mobile_menu_4-300x120.jpg\")
<\/a>\r\n<\/li>\r\n- \r\n
Product Sitemap<\/strong> and Category Sitemap<\/strong> links are located in the catalog.xml<\/strong> file in “app\/design\/frontend\/default\/themeXXX\/layout”<\/strong> directory.<\/p>\r\n<\/li>\r\n
- \r\n
Advanced Search<\/strong> link is in the catalogsearch.xml<\/strong> file in the same directory on your server.<\/p>\r\n<\/li>\r\n
- \r\n
Orders and Returns<\/strong> menu item is in sales.xml file<\/strong> in app\/design\/frontend\/default\/themeXXX\/layout<\/strong>.<\/p>\r\n
In this tutorial you will see more details about “Orders and Returns” link<\/a><\/p>\r\n<\/li>\r\n
- \r\n
Check this detailed tutorial on how to manage footer links in Magento<\/a>.<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/ol>\r\n
Deleting links from mobile menu only<\/strong><\/p>\r\n
Note: If you delete the link from the main file (where it is added originally), it will disappear not only from mobile menu, but from the main store view as well.<\/p>\r\n
- \r\n
- \r\n
In case you want to remove some link only from the mobile view, you would need to create a new CSS @media Query rule<\/a>. <\/p>\r\n<\/li>\r\n
- \r\n
Inspect the css class of the menu item with the help of Firebug plugin<\/a> or use some other tool of your browser.<\/p>\r\n<\/li>\r\n
- \r\n
Create a media Query rule depending on the width of your mobile screen width. For example:<\/p>\r\n
\r\n@media screen and (max-width: 765px) {\r\n\t.top-link-blog > a {\r\n\t\tdisplay: none !important;\r\n\t}\r\n} \r\n\t\t\t<\/pre>\r\n<\/li>\r\n- \r\n
Add your new rule to the bottom of the responsive.css<\/strong> file in \/skin\/frontend\/default\/themeXXX\/css<\/strong> folder on your server.<\/p>\r\n<\/li>\r\n
- \r\n
Save the changes and check the updated mobile menu on the front end.<\/p>\r\n<\/li>\r\n<\/ol>\r\n
Editing the icons that appear next to mobile menu links<\/strong><\/p>\r\n
- \r\n
- \r\n
The icons next to menu items are represented by the Fontawesome<\/strong> iconic font icons which are added to a css file with the help of a special class which is unique for each icon.<\/p>\r\n<\/li>\r\n
- \r\n
Inspect the icon class with the help of Firebug plugin<\/a> or some other developer tool. Usually, the icon classes are added to the styles.css<\/strong> file located in \/skin\/frontend\/default\/themeXXX\/css<\/strong> folder on your server:<\/p>\r\n
![\"magento_manage_mobile_menu_5\"](\"\/help\/wp-content\/uploads\/2015\/04\/magento_manage_mobile_menu_5-300x135.jpg\")
<\/a>\r\n<\/li>\r\n- \r\n
Find the necessary file on your hosting cpanel or use the FTP to connect to your server. Locate the line you inspected with Firebug and look for the icon class:<\/p>\r\n
![\"magento_manage_mobile_menu_6\"](\"\/help\/wp-content\/uploads\/2015\/04\/magento_manage_mobile_menu_6-300x164.jpg\")
<\/a>\r\n<\/li>\r\n- \r\n
Go to the official Font Awesome site<\/a> and find the class of your icon.<\/p>\r\n
- \r\n
- \r\n
- \r\n
- \r\n
![\"magento_manage_mobile_menu_7\"](\"\/help\/wp-content\/uploads\/2015\/04\/magento_manage_mobile_menu_7-300x152.jpg\")
<\/a>\r\n<\/li>\r\n