Issues with Category Thumbnail Image with drop down menu

[barbour]

My test stie (no products):

http://www.discounttherapyproducts.com

 

Please take a look at my first category "ADL" with the drop down menu. 

 

For some reason my thumbnail categories are lining up left to right, instead of at the bottom of the menu.

 

Plus when I add 2 thumbnails, instead of them neatly spaced left to right, they are lining up on top of each other.  

 

Any clue on a fix?

Thanks

 

[barbour]

Code from super fish-modified.css

 

Saw this code for thumbnail cateogry

 

 

 

.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; }

[barbour]

Any ideas?   Thanks

[barbour]

bump

[titanotam]

My test stie (no products):

http://www.discounttherapyproducts.com

 

Please take a look at my first category "ADL" with the drop down menu. 

 

For some reason my thumbnail categories are lining up left to right, instead of at the bottom of the menu.

 

Plus when I add 2 thumbnails, instead of them neatly spaced left to right, they are lining up on top of each other.  

 

Any clue on a fix?

Thanks

 

Go to: public_html/themes/default-bootstrap/css/modules/blocktopmenu/css

Open file superfish-modified.css

And add the following code:

.sf-menu > li > ul > li.category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-top: 50px;
  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; } 

right after the .sf-menu > li > ul > li#category-thumbnail {} block

[feroca]

Go to: public_html/themes/default-bootstrap/css/modules/blocktopmenu/css

Open file superfish-modified.css

And add the following code:

.sf-menu > li > ul > li.category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-top: 50px;
  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; } 

right after the .sf-menu > li > ul > li#category-thumbnail {} block

 

It doesn't work for me...

 

www.feroca.com

 

Any help will be appreciated.

 

thanks in advance

[marboo]

Bless you titanotam! Had the same problem and this worked like a charm! :-)

[titanotam]

Bless you titanotam! Had the same problem and this worked like a charm! :-)

You're welcome mate, i'm happy with your happy