Jump to content

Top Horizontal Menu

JPhammer

By JPhammer
in General topics

 Share

Recommended Posts

JPhammer Newbie

JPhammer

Posted
Posted

Evening All,

 

I'm new to Prestashop and i'm having a few issues trying to customize my menu bar on my template.  I've enabled " top horizontal menu" module, able to create new links etc no problem. But i would like to change the colour of the bar and center the links.

 

I thought i had found the correct image, changed the colour in photoshop, uploaded it to my site but didn't work .  

 

I've then located my global.css file but can't find "sf-menu" , " top_menu" or "bar_top_menu" within the css. 

 

I haven't been able to find the main index file , every single index file I've come across i don't seem to be able to edit ( please see screen shot) .

 

Please could someone give me some advice ?  it will be very much appreciated.

post-1280528-0-79249300-1466628551_thumb.png

Thank you in advance

 

Jon  

Link to comment
Share on other sites
JPhammer Newbie

JPhammer

Posted
  • Author
Posted

Sorry another question relating to the menu bar, in the superfish-modified.css i'm struggling to get my menu links to move into the center of the bar. I have tried changing most of the positioning to " centre" but its not working. 
 
 
Please could some one help ..

 

 

/*** 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 #fd65c9;
  background: #ff80c3; }
  @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 {
  float: left;
  border-right: 1px solid #d6d4d4;
  margin-bottom: -3px; }
  @media (max-width: 767px) {
    .sf-menu > li {
      float: Center;
      position: Center;
      border-right: none; }
      .sf-menu > li span {
        position: Center;
        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 #fd65c9; }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #333;
    border-bottom-color: #fd65c9;
    color: #fff; }
 
.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: #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 16px/20px "Open Sans", sans-serif;
    color: #333; }
    .sf-menu > li > ul > li > a:hover {
      color: #515151; }
 
.sf-menu > li > ul > li {
  float: left;
  width: 20%;
  padding-right: 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: right;
    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 */
Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

float: center and position: center is not valid CSS. You can only float left or right and position absolute, relative or static. If you want to center the items, you'll need to remove the float and change display to inline-block and text-align to center. For example:

 

.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  border-bottom: 3px solid #fd65c9;
  background: #ff80c3;
  text-align: center;
}

 

.sf-menu > li {
/*  float: left;*/
  display: inline-block;
  border-right: 1px solid #d6d4d4;
  margin-bottom: -3px; }

 

 

The bold lines are the lines I've changed.

Link to comment
Share on other sites
  • 2 weeks later...
JPhammer Newbie

JPhammer

Posted
  • Author
Posted

hello, 

 

Sorry still having a few issues with the menu bar , ive changed all floats to display:inline-block. But its still not moved the button to the center of the bar . Here is the latest code, please could someone take a look to see if i have missed something.

 

Thank you in advance 

 

 

post-1280528-0-79249300-1466628551_thumb.png

:

 

/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  display: inline-block;
  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 #fd65c9;
  background: #ff80c3; }
  @media (max-width: 767px) {
    .sf-menu {
      display: inline-block; } }
 
.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #fff }
  @media (max-width: 767px) {
    .sf-menu ul {
      display: inline-block; } }
 
.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 {
      display: inline-block;
      position: Center;
      border-right: none; }
      .sf-menu > li span {
        position: Center;
        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: inline-block;
    padding: 17px 20px;
    border-bottom: 3px solid #fd65c9; }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #333;
    border-bottom-color: #fd65c9;
    color: #fff; }
 
.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: #333; }
 
.sf-menu li ul {
  display: inline-block;
  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 16px/20px "Open Sans", sans-serif;
    color: #333; }
    .sf-menu > li > ul > li > a:hover {
      color: #515151; }
 
.sf-menu > li > ul > li {
  display: inline-block;
  width: 20%;
  padding-right: 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: right;
    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 */
Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

Change the following line:

.sf-menu > li {
  float: left;
  border-right: 1px solid #d6d4d4;
  margin-bottom: -3px; }

to:

.sf-menu > li {
  display: inline-block;
  border-right: 1px solid #d6d4d4;
  margin-bottom: -3px; }
Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

Try:

/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
  display: inline-block;
  width: 100%; }
 
.sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none; }
 
.sf-menu {
  text-align: center;
  position: relative;
  padding: 0;
  width: 100%;
  border-bottom: 3px solid #fd65c9;
  background: #ff80c3; }
  @media (max-width: 767px) {
    .sf-menu {
      display: inline-block; } }
 
.sf-menu ul {
  position: absolute;
  top: -999em;
  background: #fff }
  @media (max-width: 767px) {
    .sf-menu ul {
      display: inline-block; } }
 
.sf-menu ul li {
  width: 100%; }
 
.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ }
 
.sf-menu > li {
  display: inline-block;
  border-right: 1px solid #d6d4d4;
  margin-bottom: -3px; }
  @media (max-width: 767px) {
    .sf-menu > li {
      display: inline-block;
      position: Center;
      border-right: none; }
      .sf-menu > li span {
        position: Center;
        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: inline-block;
    padding: 17px 20px;
    border-bottom: 3px solid #fd65c9; }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #333;
    border-bottom-color: #fd65c9;
    color: #fff; }
 
.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: #333; }
 
.sf-menu li ul {
  display: inline-block;
  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 16px/20px "Open Sans", sans-serif;
    color: #333; }
    .sf-menu > li > ul > li > a:hover {
      color: #515151; }
 
.sf-menu > li > ul > li {
  display: inline-block;
  width: 20%;
  padding-right: 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: right;
    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 */
Link to comment
Share on other sites
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...