1. Login to Prestashop Back-end

2. In the left menu in back-end, you will see the “JMS Theme Layout” menu

Depend on your module is in which section (header, home body or footer), click on that menu. In this example, because the Social module is in Header section, so I click on “JMS Theme Header” menu

3. After click on JMS Theme Header menu, in the right site you can see the Profile list

4. Click on Row list button, a new page will appear

In this page, you can see that the Social module is in the “TOPBAR LEFT” position. Now if we want to extend the width of Social Module, we need to extend the width of “TOPBAR LEFT” position.

Notice: You can use mouse to resize (hover to the right side of each position), drag and drop those positions as you want. 

Or if you want to do it manually, please follow these steps:

5. Click on arrow button, then click on Edit menu (see image)

6. In the new page, you can edit the width of the TOPBAR LEFT position

7. As you can see in the image below, the main screen was separated in 12 columns with the same width

The width of “TOPBAR LEFT” position is 3 column, I want to make it wider so I changed it to 4 then click on the save button at the bottom.

8. After saved, you can see that the “TOPBAR RIGHT” is moved down at second row. That’s because the width of “TOPBAR LEFT” was extended then there is not enough space for both of them in 1 row. So we have to resize the “TOPBAR RIGHT”

9. Do similar with steps #5, #6, #7 to reduce the width of TOPBAR RIGHT from 9 columns to 8 columns. The problem is fixed now.

10. Go to front-end then see the result

Done!