how to delete border on top menu

[abhirasyid]

Hi,

 

im trying to delete the white border between menu on top menu (see attachtment). Does somebody know where/how to delete it? Im using prestashop 1.6 btw

 

thanks before

[dioniz]

Open yourtheme/css/modules/blocktopmenu/css/superfish-modified.css and find

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

Remove border-right line.

[abhirasyid]

@dioniz i tried that but nothing happened :|

[vekia]

  On 4/27/2014 at 11:25 AM, abhirasyid said:

@dioniz i tried that but nothing happened :|

 

can you share link to your shop?

i bet on cache,

- try to clear shop cache and recompile entire theme (you use ccc for css?)

- try to clear browser cache

[ZinC]

The menu on that image doesn't look like the top menu in default-bootstrap. Are you using a different theme or just a customized menu? I'm new to Prestashop and am currently working on customizing default-bootstrap and learning/figuring out how to do things in the absence of official guides.

 

BTW, to clear browser cache quickly just hold shift-key and hit refresh/F5.

[vekia]

shift? perhaps you mean ctrl? ctrl+f5 clears browser cache

[ZinC]

  On 4/27/2014 at 12:34 PM, vekia said:

shift? perhaps you mean ctrl? ctrl+f5 clears browser cache

True, but I use to hold the ⇧ Shift key and click the Reload button on the navigation toolbar. I think (?) that does it too.

[abhirasyid]

@vekia i did that but still the same, here is my site: http://pavbeta.esy.es/

 

@zinc i use the default thema from prestashop, just modified it litte bit

Edited April 27, 2014 by abhirasyid (see edit history)

[vekia]

  On 4/27/2014 at 10:15 PM, abhirasyid said:

@vekia i did that but still the same, here is my site: http://pavbeta.esy.es/

 

 

your css styles are minified. and there is still code that dioniz suggested to remove.

please turn of temporarily ccc for css files (adv. paramters > performance tab) and then - recompile theme.

[ZinC]

Search your files for:

#header .sf-menu > li{border-right:1px solid #fff}

It's not in superfish-modified.css. Prestashop is making me dizzy

[vekia]

it is in superfish-modified.css, at the moment he use ccc for css files, so all css files are minified into one file.

when ccc for css is active, to see changes it's necessary to recompile theme.

[abhirasyid]

  On 4/27/2014 at 11:38 PM, vekia said:

it is in superfish-modified.css, at the moment he use ccc for css files, so all css files are minified into one file.

when ccc for css is active, to see changes it's necessary to recompile theme.

 

hi vekia, i did it now, but still no change

[abhirasyid]

Btw here is my superfish-modified.css:

 

  Reveal hidden contents

 

/*** 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: #fff;
    display: block;
    padding: 17px 20px;
     }
  .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: 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%; } }
  @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: #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; }

 

Edited April 28, 2014 by abhirasyid (see edit history)

[ZinC]

It's here:

http://pavbeta.esy.es/modules/themeconfigurator/css/theme8.css

 

I mean:

#header .sf-menu > li {
  border-right: 1px solid #fff;
}

Edited April 28, 2014 by ZinC (see edit history)

[abhirasyid]

  On 4/28/2014 at 12:16 AM, ZinC said:

It's here:

http://pavbeta.esy.es/modules/themeconfigurator/css/theme8.css

 

I mean:

#header .sf-menu > li {
  border-right: 1px solid #fff;
}

 

Ah that's right, so i have to delete that line on superfish-modified.css and on theme8.css. It worked now! Thanks a lot

[rayleic]

  .sf-menu > li > a {

    font: 600 17px/21px "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; }

 

Add below css under above code in superfish-modified.css if you use 1.6 version default theme,

This will display a border between two menu names.

 

.sf-menu > li +li{

  border-left: 1px solid #d6d4d4;

  }

[ZinC]

  On 5/7/2014 at 10:29 AM, rayleic said:

 

  .sf-menu > li > a {

    font: 600 17px/21px "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; }

 

Add below css under above code in superfish-modified.css if you use 1.6 version default theme,

This will display a border between two menu names.

 

.sf-menu > li +li{

  border-left: 1px solid #d6d4d4;

  }

 

The border was already there.. the TO was seeking to remove it. The issue is already solved.