Bootstrap Top Horizontal Menu

Avatar
  • Answered
Take a look at the top horizontal menu. The drop down menu are jacked up. I understand that this is not a mega menu but something is controlling how these drop downs are displayed.
1. The home tab is listing every category....why?
2. The column widths are all wrong.
3. Look under Dog Beds and Replacement Parts. Notice that in Dog Beds it list Dog Pillow Beds Vertically. Note in replacement parts, everything is run together.
What is controlling the drop downs?
Using 1.6 bootstrap. Just the standard stuff.
Avatar
Arn
Hello Bruce, Sorry for continued problems with the website. It does appear that you have some customized widths for the menus, when comparing to a default site using the default theme. If you want to keep it at the font size that you're using, then you will need to look at each displayed element and see how it is being affected, and then make adjustments in the CSS. The size change is affecting the default theme. The behavior of the Home tab is based on the display of HOME category. I know that you can also remove the subcategories from the home. Scott's taking a quick peek. He may drop a comment after reviewing the issue. He says that it appears to ALL related to CSS and that the changes would need to be made there in order to be effective with your theme. If you have any further questions or comments, please let us know. Regards, Arnel C.
Avatar
Scott
Hello Bruce, I took a look at the issues you are having with the menus. Here are the things I have found. 1) The reason all categories are displaying under the Home tab is because you have every category set with Home as the parent. 2) I'm not sure what you mean here as I have no standard to measure them against. What is the 'correct' width? 3) The reason the Dog Pillow Beds are listed vertically is due to the width of the column. Since there are three words, PrestaShop simply lists each word on a separate line otherwise it would run together like the Replacement Parts options you mention. The word Replacement is a single word so PrestaShop cannot break it apart. The second word, however, is listed vertically. This is again due to the allotted space for the column width. CSS is controlling the layout of the menu. CSS is where all the formatting is located and there are several different CSS files that control all the various aspects of a theme/site. I'm not sure who or what modified the theme, but it is a bit different than the default as I compared it against my own prestashop install with the same version and theme. One particular CSS file for the top menu area of that theme has a modified date that is a month later than the rest, indicating it was modified at some point. On about line 140, there is a setting that says "width: 50%". This specific setting is one that controls the sub menu spacing. My default version has that set to 100%. If you change that, it will expand the allowed spacing for the submenus and the submenu items will not go vertical as soon nor would they run together as readily. I tested that setting on your site through the Chrome editor (it allows me to see what a changes would look like without modifying your code) and it took care of the issues with the Dog Beds and the Replacement Parts sub menus. The file, should you be interested in making the change, is located at /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css Remember line 140. Change it from " width: 50%" to " width: 100%". That should correct the issue. Kindest Regards, Scott M