Magento. How to manage the mobile menu and how to edit links in mobile view

In this tutorial we will teach you how to manage the mobile menu and how to edit the links that appear on mobile view in Magento.

Magento. How to manage the mobile menu and how to edit links in mobile view

1. The mobile menu links in Magento are generated from the header and footer links of the main store view:

   

2. The main code that defines the mobile menu has the class

   . It is added to header.phtml file in app/design/frontend/default/themeXXX/template/page/html directory on your server:

   

3. In this code you can see the main sources which define the menu links on mobile:

   • the Home link is located in the same code of the header.phtml file:

     __('Home') ?>

   • My Account, My Whishlist, Log In and Log Out menu links can be found in the customer.xml file in “app/design/frontend/default/themeXXX/layout” directory on your server.

   • My Cart and Checkout links code is in the checkout.xml file in the same directory:

     

   • Check this tutorial for more details on how to manage header links in Magento.

   • the Currency, as well as the Language link, are located in header.phtml file:

     getChildHtml('currency_2') ?>
     getChildHtml('store_language_2') ?>

   • Note: If you delete these links from the swipe menu code, they will still be displayed on the main store view.

   • About Us, Customer Service and Privacy Policy are Magento static block links which can be edited from admin panel in CMS-> Static blocks->Footer Links section:

     

   • Product Sitemap and Category Sitemap links are located in the catalog.xml file in “app/design/frontend/default/themeXXX/layout” directory.

   • Advanced Search link is in the catalogsearch.xml file in the same directory on your server.

   • Orders and Returns menu item is in sales.xml file in app/design/frontend/default/themeXXX/layout.

     In this tutorial you will see more details about “Orders and Returns” link

   • Check this detailed tutorial on how to manage footer links in Magento.

Deleting links from mobile menu only

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.

1. In case you want to remove some link only from the mobile view, you would need to create a new CSS @media Query rule.

2. Inspect the css class of the menu item with the help of Firebug plugin or use some other tool of your browser.

3. Create a media Query rule depending on the width of your mobile screen width. For example:

   @media screen and (max-width: 765px) {
   	.top-link-blog > a {
   		display: none !important;
   	}
   } 
   			

4. Add your new rule to the bottom of the responsive.css file in /skin/frontend/default/themeXXX/css folder on your server.

5. Save the changes and check the updated mobile menu on the front end.

Editing the icons that appear next to mobile menu links

1. The icons next to menu items are represented by the Fontawesome iconic font icons which are added to a css file with the help of a special class which is unique for each icon.

2. Inspect the icon class with the help of Firebug plugin or some other developer tool. Usually, the icon classes are added to the styles.css file located in /skin/frontend/default/themeXXX/css folder on your server:

   

3. 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:

   

4. Go to the official Font Awesome site and find the class of your icon.

   

5. In order to change the image, replace the class of the current icon in styles.css with the class of new icon you like from the list of item classes on the official Font Awesome site.

6. Save your changes and check how the new icon appears on the site front end.

7. Perform the procedure with the other icons you want to change.

We hope the tutorial was useful for you. Feel free to check the detailed video tutorial below:

Magento. How to manage the mobile menu and how to edit links in mobile view