how to delete border on top menu

abhirasyid · April 27, 2014

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 · April 27, 2014

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 · April 27, 2014

@dioniz i tried that but nothing happened :|

vekia · April 27, 2014

@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 · April 27, 2014

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 · April 27, 2014

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

ZinC · April 27, 2014

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 · April 27, 2014

@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 · April 27, 2014

@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 · April 27, 2014

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 · April 27, 2014

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 · April 28, 2014

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 · April 28, 2014

Btw here is my superfish-modified.css:

/*** 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 · April 28, 2014

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 · April 28, 2014

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 · May 7, 2014

.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 · May 7, 2014

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

how to delete border on top menu

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

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites