Full width menu?

[gore.m]

HI..

I did some tweaks on top menu.. now it is not matching  up with width:

 

font-family: "Arial", sans-serif;
    color: #555;
    padding: 4px 20px 3px 20px;
    text-decoration: none;
    font-size: 12px;
    border-right: 2px solid #F9F9F9;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #f0f0f0 5%, #E3E3E3 100%);

How can I fix that?

Thanks you

[danr87]

give us the URL

[gore.m]

Still dont have it online. Can I post other code etc...?

[danr87]

Well, you could search in superfish-modified.css and work on the .sf-menu style. Make its width 100% or something fixed.

 

You also should have a grey background in this style. If it is transparent, it will look the same.

 

so it will be something like:

 

.sf-menu {

width:100%;

background-color:#666;

.

.

.

.

.

 

}

 

if its a different menu, fint its base container, and do the same

[gore.m]

Thanks you.
I did it before but I got two problems:

1) Last item looks strange on "mouse hover", because there is tail :

 

2) I used border to separate items, how can I "disable" it for first or last item?

Thanks you

[vekia]

styles of this menu can be affected with other parts of shop...

this is why url will be helpful.

 

anyway, on image that you attached above - everything is okay.

your menu item is just have width that is not equal to its width+this empty space.

this is how it works by default.

[gore.m]

OK So..  is it possible to style one of items by diffrent style? I have tried "first-child" but it doesnt work or I made an mistake...

[danr87]

the menu looks like this:

 

ul  -- here you made its width bigger

  li -- it affects all your menus   --> here you will have the code like   ul > li:last-chid > a     [and here you put code to affect the last item in the menu ] 

 

of course without a URL we can't give you the exact code.

[gore.m]

Thanks you, Ive tried this:

.sf-menu ul > li:last-child > a  { 
 border-right: none; }

but it didnt work.

 

Global:

.clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
prvek {
}
#block_top_menu {
    padding-top: 24px;
    margin-bottom: 2px;
}
.sf-contener {
    clear: both;
    float: left;
    width: 100%;
}

superfish:

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

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

.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  background:linear-gradient(to bottom, #F0F0F0 5%, #E3E3E3 100%) repeat scroll 0% 0% transparent; 
  padding: 0px 0px 3px; }
  @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;
  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-family: "Arial", sans-serif;
    color: #353535;
    padding: 4px 21px 3px 20px;
    text-decoration: none;
    font-size: 12px;
    border-right: 3px solid #F9F9F9;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #f0f0f0 5%, #E3E3E3 100%);
    }
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: #690;
    color: #fff;
    border-bottom-color: #666666; }

.sf-menu ul > li:last-child > a  { 
 border-right: none; }



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

[danr87]

ok, than try this. 

 

.sf-menu > li:last-child {   }

 

should work, without 'a'

[gore.m]

Not working  

[dioniz]

You can't do that with border:none, because that is not border.

You can try to fix this by changing link padding but it probably won't work in pixel. Then you can fix it by making first or last child a bit bigger padding.

But remember if you will add top links later you will have to fix it again.

[danr87]

Put it on a site and we'll help. Thats because we need to make some trial and error to get it working, i usually work with chrome - inspect element, and see the changes live (or firefox - firebug)

[gore.m]

Ok,  Ill remind it later, when it will online., thanks you