HostOnNet Blog

How to set full width menu in PrestaShop 1.7 with Classic template

A Client recently contacted us to do the following custamization for his PrestaShop website.

1. Move the main menu to bottom below the logo

2. Set 100% width for main menu

3. Replace PretaShop powered by link – We have already covered topics on PretaShop powered by link removal

To help you, I’m going to show you how I modified PrestaShop.

STEP 1

Add the following css codes to the /themes/classic/assets/css/custom.css file.

.top-menu{position:relative;}
.menu .top-menu>li{ float:left; }
.top-menu .sub-menu{margin-left:0;}

STEP 2

Edit the /themes/classic/modules/ps_mainmenu/ps_mainmenu.tpl file and find the below code

<div class="menu col-lg-8 col-md-7 js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">

Replace with

<div class="menu container js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">

STEP 3

Login to PretaShop admin area > Design > Positions > Edit Main Menu

PretaShop custamization

Hook the top menu module with the “displayNavFullWidth”

displayNavFullWidth

Here’s what our PretaShop looks like after the modification.

If you have any questions or feel I didn’t explain something well enough, please send an email to install@hostonnet.com

UPDATE : If the menu still in left side corner, edit theme.css file in /themes/classic/assets/css/ and remove the following

#header .menu,#header .menu>ul>li{display:inline-block}

About Sibi Antony

Bootstrap and Android LOVER. I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.
Posted in Installation