Jump to content

Sub-Categories misalign in Top horizontal menu block

kaheng

By kaheng
in OUT - 1.6.0.11 [7 Jan 2015]

 Share

Recommended Posts

kaheng Newbie

kaheng

Posted
Posted
Hi,

 

I'm doing customization on PrestaShop v1.6.0.5. I was trying to change the top menu font size, colour and padding (Top horizontal menu block) by modified the superfish-modified.css file. 

 

Soon after that, I noticed that the sub-categories list in the top menu drop down is not align in the same row (refer to the PS-TopMenu.png screen shot). From the screen shot, the second and third items of subcategory (Jacket and Coat) are suppose to be same row with the first item (Cardigan) but somehow it move to next row.

 

I could not trace what the problem as I did the css modification and some configurations in Back Office at the same time. I've revert back the original superfish-modified.css file follow by did a clear cache but problem still persist.

 

Can anyone assist on the above matter.

Thanks!

 

post-781953-0-58133100-1398272988_thumb.png

Link to comment
Share on other sites
vmarkovic Newbie

vmarkovic

Posted
Posted

Hi Vekia,

Thanks for your reply.This works, its better looking already, oh yeah :)
Still, there are some spacing issues left, you can check them on my "Alati" or "Kuća i vrt" top menu categories.

00Vp3ee.jpg

 

Also, is there a way to fix "thinner letter" issue for letters č, ć, š, đ, etc on top horizontal menu font?

Regards,

Vedran

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Hi Vekia,

 

Thanks for your reply.This works, its better looking already, oh yeah :)

Still, there are some spacing issues left, you can check them on my "Alati" or "Kuća i vrt" top menu categories.

 

00Vp3ee.jpg

 

Also, is there a way to fix "thinner letter" issue for letters č, ć, š, đ, etc on top horizontal menu font?

 

Regards,

 

Vedran

 

it's czech language?

Link to comment
Share on other sites
dioniz Newbie

dioniz

Posted
Posted

One way to do it is to make width 25% and remove pading, and you will have 4 columns.

Other way is to replace margin-bottom: 50px; with height:60px but you will have gaps where there's only one line of text in a link

  • Like 1
Link to comment
Share on other sites
vmarkovic Newbie

vmarkovic

Posted
Posted

Hi Dioniz,

As always, thanks for your useful reply. I aplied your 1st solution and I am liking it. I will play a bit more with it, maybe rename some of mine long-name categories. I am mainly satisfied with the way it looks now, it much much better.

Regards,

Vedran

Link to comment
Share on other sites
enricprestashop Newbie

enricprestashop

Posted
Posted

I got some concerns with categories position in the superfish topmenu here as well. Is there anyway to define where we want the categories to be displayed? I already commented the css line for clear:left, but anyway, short categories of one product are going to the longest row. Right now, the only way I see is keep playing with the order of the categories in the backoffice, and pray for better luck :/

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

No, its Croatian but it belongs to Slavic langugages just like Czech.

 

Wiki: http://en.wikipedia.org/wiki/Slavic_languages#Branches

 

 

your website contains this include of google fonts:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,600" type="text/css" media="all">

change it to:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,600&subset=latin-ext,latin" type="text/css" media="all"> 
  • Like 1
Link to comment
Share on other sites
prestamax Apprentice

prestamax

Posted
Posted

Deleting "clear:left" works as long as there is no line break in any menu item. The problem lies with a wrong count in blocktopmenu.js. There has been a bug report and a fully working solution with a corrected blocktopmenu.js is posted here: http://www.prestashop.com/forums/topic/315933-16-top-menu-sub-menu-spacing-issues/page-2?do=findComment&comment=1622487

  • Like 1
Link to comment
Share on other sites
vmarkovic Newbie

vmarkovic

Posted
Posted

 

your website contains this include of google fonts:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,600" type="text/css" media="all">

change it to:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,600&subset=latin-ext,latin" type="text/css" media="all"> 

 

Hi Vekia,

 

Thanks for your answer. I am a noob and I dont know where to make this change :)

 

Regards,

 

Vedran

Link to comment
Share on other sites
vmarkovic Newbie

vmarkovic

Posted
Posted

Hi Guys, again,

My Top Horizontal Menu on mobile doesnt look as before, I belive that above changes that I did has something to do with it but I cant figure it out.

This marked section is my top hotizontal menu "Categories" menu on mobile. It should look like categories below.

 

x447HsZ.png

 

aqRNfli.png

Regards,

Vedran

Link to comment
Share on other sites
dioniz Newbie

dioniz

Posted
Posted

Vedran,

 

You don't have this stiles in your yourtheme/css/modules/blocktopmenu/css/superfish-modified.css

.cat-title {
  display: none; }
  @media (max-width: 767px) {
    .cat-title {
      display: block;
      font: 600 18px/22px "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #484848;
      display: block;
      padding: 17px 20px;
      border-bottom: 3px solid #e9e9e9;
      background: #f6f6f6;
      position: relative; }
      .cat-title:hover {
        background: #333333;
        border-bottom-color: #666666;
        color: white; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 18px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }
Link to comment
Share on other sites
vmarkovic Newbie

vmarkovic

Posted
Posted

Hi Dioniz, 

Thanks for you reply. Actually I have this code between lines 187 and 213,
 

.cat-title {
  display: none; }
  @media (max-width: 767px) {
    .cat-title {
      display: block;
      font: 600 18px/22px "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #484848;
      display: block;
      padding: 17px 20px;
      border-bottom: 3px solid #e9e9e9;
      background: #f6f6f6;
      position: relative; }
      .cat-title:hover {
        background: #333333;
        border-bottom-color: #666666;
        color: white; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 18px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }

Still, I replaced it with the one you provide but didnt experience any changes.

 

Regards,

Vedran

Link to comment
Share on other sites
vmarkovic Newbie

vmarkovic

Posted
Posted

You must have some error in this file cause i don't see it in firebug.

Can you paste all superfish-modified.css here

Of course, here it goes:

 

/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  float: left;
  width: 100%; }


.sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none; }


.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  border-bottom: 3px solid #e9e9e9;
  background: #f6f6f6; }
  @media (max-width: 767px) {
    .sf-menu {
      display: none; } }


.sf-menu ul {
  position: absolute;
  top: -999em;
  background: white; }
  @media (max-width: 767px) {
    .sf-menu ul {
      position: relative; } }


.sf-menu ul li {
  width: 100%; }


.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ }


.sf-menu > li {
  float: left;
  border-right: 1px solid #d6d4d4;
  margin-bottom: -3px; }
  @media (max-width: 767px) {
    .sf-menu > li {
      float: none;
      position: relative;
      border-right: none; }
      .sf-menu > li span {
        position: absolute;
        right: 6px;
        top: 20px;
        width: 30px;
        height: 30px;
        z-index: 2; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 26px; }
        .sf-menu > li span.active:after {
          content: "\f068"; } }
  .sf-menu > li > a {
    font: 600 18px/22px "Open Sans", sans-serif;
    text-transform: uppercase;
    color: #484848;
    display: block;
    padding: 17px 20px;
    border-bottom: 3px solid #e9e9e9; }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #333333;
    border-bottom-color: #666666;
    color: white; }


.sf-menu li li li a {
  display: inline-block;
  position: relative;
  color: #777777;
  font-size: 13px;
  line-height: 16px;
  font-weight: bold;
  padding-bottom: 10px; }
  .sf-menu li li li a:before {
    content: "\f105";
    display: inline-block;
    font-family: "FontAwesome";
    padding-right: 10px; }
  .sf-menu li li li a:hover {
    color: #333333; }


.sf-menu li ul {
  display: none;
  left: 0;
  top: 59px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; }
  @media (max-width: 767px) {
    .sf-menu li ul {
      top: 0; } }


.sf-menu li li ul {
  position: static;
  display: block !important;
  opacity: 1 !important;
  background: none;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; }


.sf-menu li li li ul {
  padding: 0 0 0 20px; }


.sf-menu li li li ul {
  width: 220px; }


ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em; }


ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }


ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em; }


ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }


.sf-menu > li > ul {
  padding: 26px 30px 31px;
  width: 100%; }
  .sf-menu > li > ul > li > a {
    text-transform: uppercase;
    font: 600 16px/20px "Open Sans", sans-serif;
    color: #333333; }
    .sf-menu > li > ul > li > a:hover {
      color: #515151; }


.sf-menu > li > ul > li {
  float: left;
  width: 25%;
  margin-bottom: 50px;  }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      width: 50%; } }
  @media (max-width: 479px) {
    .sf-menu > li > ul > li {
      width: 100%; } }
  @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
 }
  @media (min-width: 480px) and (max-width: 767px) {
    .sf-menu > li > ul > li.first-in-line-xs {
      clear: left; } }


.sf-menu > li > ul > li#category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-right: 0; }
  .sf-menu > li > ul > li#category-thumbnail > div {
    float: left;
    padding-left: 10px;
    width: 33.333%; }
    @media (max-width: 479px) {
      .sf-menu > li > ul > li#category-thumbnail > div {
        width: 100%;
        padding-left: 0;
        padding-top: 10px;
        text-align: center; } }
    .sf-menu > li > ul > li#category-thumbnail > div:first-child {
      padding-left: 0; }
    .sf-menu > li > ul > li#category-thumbnail > div img {
      max-width: 100%;
      display: block; }


.cat-title {
  display: none; }
  @media (max-width: 767px) {
    .cat-title {
      display: block;
      font: 600 18px/22px "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #484848;
      display: block;
      padding: 17px 20px;
      border-bottom: 3px solid #e9e9e9;
      background: #f6f6f6;
      position: relative; }
      .cat-title:hover {
        background: #333333;
        border-bottom-color: #666666;
        color: white; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 18px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }


.sf-menu li.sf-search {
  border: none; }
  .sf-menu li.sf-search input {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: white;
    margin: 13px 10px 0 0;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }
Link to comment
Share on other sites
prestaquest Newbie

prestaquest

Posted
Posted

Hi guys, i have a question about the Categories menu below: this one has a '+' sign on mobile, how do I set it to be expanded by default? I want my mobile customers to see all links at first glance.

 

 

 

Dioniz,

Once again, you did it :) Thank  you very much.

Here is ss:

 

guqqOaB.png

 

Regards,

Vedran

Link to comment
Share on other sites
dioniz Newbie

dioniz

Posted
Posted

Hey prestaquest,

 

in yourtheme/css/modules/blocktopmenu/css/superfish-modified.css find this code

@media (max-width: 767px) {
    .sf-menu {
      display: none; } }

change to display:block;

  • Like 1
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...