Prestashop 1.7.4.2 - How to make divider for top menu link and hover effect

The original classic template of the Prestashop 1.7.4.2 has a very big potential to be as good as an expensive template from the Template Monster. However, you have to know how to edit the CSS and adjust all the style of the looks. This time we are going to make the hover effect and divider to the top menu to make it looks attractive. As always we are going to use the custom.css - so not to disturb the original css in the Prestashop Template.

1. Use FTP I am using FileZilla

2. Look for the folder .../htdocs/themes/classic/assets/CSS

3. Open / edit the custom.css file using notepad++

4. Add the following CSS code - where the first code is to add border-right as the menu divider with the size of vertical line 1px. The second CSS code is to add the hover effect to the menu you can change the background-color to any HTML color that you prefer.

/*Top menu border divider*/

#header .header-top a[data-depth="0"] {
font-size: 20px;
border-right: 1px solid #ff9a52;
color: #ff9a52;
}

/*Top menu hover effect*/

#header .top-menu a[data-depth="0"]:hover {
text-decoration: none;
background-color: #f1f1f1;
border-radius: 5px;
}

5. Save the custom.css and re-upload to replace the existing one via the FileZilla FTP.

6. Then login to the PrestaShop admin back office

7. Under Configure > Advanced Parameters > Performance click on "Clear Cache" button

8. Now browse to the shop you will see the menu divider line and also hover your mouse to the menu to view the hover effect.