xF2 Style Guide to creating a mobile bottom menu for XenForo 2

To create a bottom menu for mobile similar to xenf.net, you can proceed as follows:

1. Open extra.less in your theme and paste the below code snippet at the end of extra.less
   
   Code:

   You must be logged-in to view.
   (11 lines)

2. Open template modifications in Appearance by navigating to Appearance -> template modifications and create a new template.
3. In the 'New Template Modification' dialog, enter PAGE_CONTAINER in the Template field.
   • In the Find field, enter the following code below
     
     Code:

     You must be logged-in to view.
     (1 lines)

   • Paste the following code snippet into the Replace field
     
     
   • Code:

     You must be logged-in to view.
     (209 lines)

4. Save and done.

You can also customize the components in the menu to fit your needs.