Personnalisation du menu horizontal

[pilou92]

Bonjour,

 

Je suis en train de travailler à la personnalisation de mon menu horizontal et il subsiste quelques éléments que je n'arrive pas à modifier.

 

Voici déjà mon fichier superfish-modified.css :

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

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

.sf-menu {
  /*position: relative;*/
  text-align: center;
  padding: 0;
  width: 100%;
  border-bottom:   ;
  background: ; }
  @media (max-width: 767px) {
    .sf-menu {
      display: none; } }

.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #fff; }
  @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 {
  border-right: 1px solid #d6d4d4;
  border-left: 1px solid #d6d4d4;
  border-top: 0.5px solid #d6d4d4;
  margin-bottom: 1px;
  margin-right: 1px;
  display: inline-block;
  width: 175px  }
  @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 15px/15px "Open Sans", sans-serif;
    text-transform: uppercase;
    color: #000000;
    display: block;
    padding: 5px 7px;
    border-bottom: 1px solid #e9e9e9; }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #6788AB;
    border-bottom-color: ;
    color: #fff; }

.sf-menu li li li a {
  display: inline-block;
  position: relative;
  color: #777777;
  font-size: 12px;
  line-height: 12px;
  font-weight: bold;
  padding-bottom: 0px; }
  .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: #333; }

.sf-menu li ul {
  display: none;
  left: 0;
  top: 59px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  -webkit-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;
  -moz-box-shadow: transparent 0px 0px 0px;
  -webkit-box-shadow: transparent 0px 0px 0px;
  box-shadow: transparent 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 14px/14px "Open Sans", sans-serif;
    color: #333; }
    .sf-menu > li > ul > li > a:hover {
      color: #ff6600; }

.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding: 5px 7px;
  border-right: 1px solid #d6d4d4;
  padding-right: 15px;
  padding-bottom: 15px;  }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      width: 50%; } }
  @media (max-width: 479px) {
    .sf-menu > li > ul > li {
      width: 100%;
      padding-bottom: 20px; } }
  @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: 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: #333;
        border-bottom-color: #666666;
        color: #fff; }
      .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: #fff;
    margin: 13px 10px 0 0;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }

#block_top_menu .category-thumbnail {
  clear: both;
  width: 100%;
  float: none; }
  #block_top_menu .category-thumbnail div {
    float: left;
    width: 33.33333%; }
    #block_top_menu .category-thumbnail div img {
      max-width: 100%; }
#block_top_menu li.category-thumbnail {
  padding-right: 0; }

/*# sourceMappingURL=superfish-modified.css.map */

Je veux que le menu soit centré (ce qui est bien le cas), mais pas les sous-menus.

 

D'autre part, les sous-menus de la première ligne cachent la deuxième ligne du menu. Comment faire en sorte que le sous-menu apparaissent plus bas ?

 

Enfin, je ne comprends pas pourquoi la dernière case de mon menu est légèrement décalée vers la droite par rapport aux autres. Il s'agit d'un CMS pour info.

 

Voici le lien vers mon site pour vous faire une idée : http://www.galerieduluminaire.fr/gdl/

 

Merci d'avance !

[pilou92]

J'ai réussi à résoudre le second problème en jouant sur la section ".sf-menu li ul" (ligne 94), en modifiant le nombre de pixels de "top" à 82px.

 

Mais pour le reste, je suis toujours dans l'impasse.

[pilou92]

Personne pour mon souci d'alignement à gauche des sous-menus ?

 

J'ai aussi un autre petit problème : comment peut-on déplacer les miniatures dans le menu ?

Actuellement, les miniatures s'affichent en bas à gauche, j'aimerais qu'elles soient en haut au milieu.

 

MErci d'avance !

[pilou92]

Petit Up !

[pilou92]

Up !

[pilou92]

Help, please !

 

 

[Mediacom87]

Bonjour,

fichier /themes/gdl-theme/css/modules/blocktopmenu/css/superfish-modified.css

ligne 32 :

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

[pilou92]

Un très grand merci !