Jak ustawić rozwijanie kategorii w poziomie?

olsza122345 · August 10, 2016

Witam,

Moje kategorie (które na szczęście już opanowałem) rozwijają się domyślnie w poziomie (od lewej do prawej)

Jak ustawić, żeby rozwijały się pionowo ?

www.kupujeko.pl

endriu107 · August 16, 2016

Zastąp zawartość pliku superfish-modified.css tym i sprawdź jak działa:

/*** ESSENTIAL STYLES ***/

.sf-contener {
  clear: both;
  float: none;
  width: 100%; 
  }

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

.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  border-bottom: none;
  background: none; 
  }

@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: none;
  margin-bottom: 0; 
  }

@media (max-width: 767px) {

.sf-menu > li {
      float: none;
      position: relative;
      border-right: none; 
	  }

.sf-menu > li span {
        position: absolute;
        right: 13px;
        top: 17px;
        width: 20px;
        height: 20px;
        z-index: 2; 
		}

.sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f107";
          font-size: 20px; 
		  cursor: pointer;
		  
		  }

.sf-menu > li span.active:after {
          content: "\f106"; 
		  } 
		  
}

.sf-menu > li > a {
    font: 500 15px "Poppins",sans-serif;
    text-transform: uppercase;
	letter-spacing: 0.8px;
    color: #202020;
    display: block;
    padding: 15px 20px;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
    border-bottom: none; 

	}
	
    @media (min-width: 768px) and (max-width: 991px) {
		
	.sf-menu > li > a {
    font: bold 14px "Open Sans",sans-serif;
    padding: 15px 11px;


	}
  
    }

.sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #efefef;
    border-left: 1px solid #e7e7e7;
	border-right: 1px solid #e7e7e7;
	border-top: 1px solid #e7e7e7;
	border-bottom: none;
    color: #202020; 

	
	}


.sf-menu li li li a {
  display: inline-block;
  position: relative;
  color: #202020;
  font: 300 14px "Poppins",sans-serif;
  line-height: 18px;
  padding: 5px;
  -webkit-transition: all 300ms linear 0s;
  -moz-box-transition: all 300ms linear 0s;
  -o-transition: all 300ms linear 0s;
  -ms-transition: all 300ms linear 0s;
  transition: all 300ms linear 0s; 
  
}
  .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 {
	
	padding-left: 8px;
	color: #fc4d43;
	
}

.sf-menu li ul {
  display: none;
  /* left: 0; */
  top: 53px;
  /* match top ul list item height */
  z-index: 99;
  padding: 15px 0 10px 0;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }
  
.sf-menu li ul.submenu-container {
  background-color: #efefef;
  border: 1px solid #e7e7e7;
  margin-top: 3px;
  
 }
  

@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: 250px;
  /* 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: 250px;
  /* match ul width */
  top: 0; 
  }

.sf-menu > li > ul {
  padding: 20px;
  width: 250px;
  }

.sf-menu > li > ul > li > a {
    text-transform: none;
    font: 500 15px "Poppins", sans-serif;
    color: #202020; 
	-moz-transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s; 

	}

.sf-menu > li > ul > li > a:hover {
      color: #fc4d43; 
	  }

.sf-menu > li > ul > li {
  float: left;
  width: 100%;
  padding: 5px 15px 5px 0;
  }
  
.sf-menu > li > ul > li.category-thumbnail {
    clear: both;
    float: none;
    ;
    overflow: hidden;
    padding-right: 0;
    width: 100% !important;
}
  
.sf-menu > li > ul > li.category-thumbnail > div {
    float: left;
    padding-left: 10px;
    width: 33.333%;
}
  
.sf-menu > li > ul > li.category-thumbnail > div img {
    display: block;
    max-width: 100%;
	border: 1px solid #d6d4d4;
}

@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 {
   clear: left; 
} 
	  
}

@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: bold 16px "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #494940;
      display: block;
      padding: 15px 20px 15px 10px;
      border-left: 1px solid white;
	  border-right: 1px solid white;
	  border-top: 1px solid white;
      border-bottom: none; 
      background: white;
      position: relative;
	  cursor: pointer 
	  }

.cat-title:hover {
      background: #f5f5f5;
      border-left: 1px solid #e7e7e7;
	  border-right: 1px solid #e7e7e7;
	  border-top: 1px solid #e7e7e7;
	  border-bottom: none;
      color: #1b1b1b; }

.cat-title:after {
      display: block;
      font-family: "FontAwesome";
      content: "\f0c9";
      position: absolute;
      right: 15px;
      top: 17px;
      font-size: 20px;
	  cursor: pointer 
	  }

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

vekia · August 11, 2016

gdzie?

w głównym menu,
czy w bloku kategorii w kolumnie?

olsza122345 · August 14, 2016

W bloku kategorii w kolumnie, tzn. jak wchodzę na stronę główną i klikam przykładowo "CERAMIKA" to chciałbym, żeby rozwijało się to w od góry do dołu.

vekia · August 15, 2016

jestem w ceramice

jak klikam na kategorie w bloku kategorii to pokazuje mi się w formie rozwijania od góry do dołu, tak jak to opisałeś

przykład: http://i.imgur.com/gkKxtR3.gifv

olsza122345 · August 16, 2016

Chyba źle się wyraziłem.. na to wygląda. Nie orientuje się jeszcze konkretnie we wszystkim. W takim wypadku chodzi mi o rozwijanie kategorii, które są na stronie głównej stronie. Jak klikam na ceramike na stronie głównej to otwiera sie od lewej do prawej. Sorry za brak precyzji.

vekia · August 16, 2016

jak klikam w ceramike to mnie przenosi na stronę kategorii "ceramika"

jak najadę myszką to wyświetla mi się menu, i to chyba to chcesz zmienić,

olsza122345 · August 16, 2016

Dokładnie tak! To chciałbym zmienić

olsza122345 · August 16, 2016

Błagam o pomoc bo stoję z tym sklepem już tydzień i to praktycznie jedyne czego potrzebuję żeby zacząć sprzedawać

tar.tarek · August 16, 2016

inne pytanie - jaki to szablon?

olsza122345 · August 16, 2016

@tar.tarek - szablon nazywa się Modula

@endriu107 - muszę to zrobić przez FTP, tak? Wiem, jestem newbie jak cholera...

endriu107 · August 17, 2016

Tak.

tar.tarek · August 19, 2016

szablon nazywa się Modula

przeslij mi prosze link do strony z szablonem

olsza122345 · August 25, 2016

Dzękuję, wszystko działa.

Link do szablonu http://addons.prestashop.com/en/22606-modula.html?pab=1&

endriu107 · August 25, 2016

Oznaczam temat jako rozwiązany

Jak ustawić rozwijanie kategorii w poziomie?

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in