Reduce Font and general size of Top Menu (1.6)

b22c · April 13, 2014

Hi where i can decrease the size of the text and top menu? (Presta 1.6) Thanks

Fanto · April 13, 2014

i have the same question ...

dioniz · April 16, 2014

In yourtheme/css/modules/blocktopmenu/css/superfish-modified.css

.sf-menu > li > a {

    border-bottom: 3px solid #E9E9E9;
    color: #484848;
    display: block;
    font: 600 18px/22px "Open Sans",sans-serif;
    padding: 17px 20px;
    text-transform: uppercase;
}

Fanto · April 16, 2014

done and worked fine.

is there a way to reduce + and + in mobile theme?

after reduce the size of category name and subcategory name

i'd like reduce the mark for espanding submenu.

dioniz · April 16, 2014

Yep it's here:

.cat-title:after {
    content: "";
    display: block;
    font-family: "FontAwesome";
    font-size: 26px;
    position: absolute;
    right: 15px;
    top: 18px;
}

Fanto · April 16, 2014

found it,

and also modified :

.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: 10px;    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
        width: 30px;
        height: 30px;
        z-index: 2; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 16px; }  <<<<<<<<<<<<<<<<<<<<<<<<
        .sf-menu > li span.active:after {
          content: "\f068"; } }

thank you.

Edited April 16, 2014 by Fanto (see edit history)

Fanto · April 16, 2014

now i'd like to add an image only to subcategory on topmenu

any chance to dispaly it on topmenu?

here http://www.prestashop.com/forums/topic/323423-top-menu-subcategory-image

i don't receive an asnwer

vekia · April 16, 2014

replied!

Fanto · April 19, 2014

replied!

saw it! i'll try and test

blazern · July 9, 2014

In yourtheme/css/modules/blocktopmenu/css/superfish-modified.css

.sf-menu > li > a {

    border-bottom: 3px solid #E9E9E9;
    color: #484848;
    display: block;
    font: 600 18px/22px "Open Sans",sans-serif;
    padding: 17px 20px;
    text-transform: uppercase;
}

How do I change font size in Prestashop 1.6.0.8, These lines are not included in superfish-modified.css ???

vekia · July 9, 2014

How do I change font size in Prestashop 1.6.0.8, These lines are not included in superfish-modified.css ???

there is a line:

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

blazern · July 9, 2014

there is a line:

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

Nope, here's my file

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

margin-right: 14px;

float: right;

width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #383838;

}

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

border-right: 1px solid #777;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

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;

}

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:34px;

border: 0;

text-decoration:none;

}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/

color: #fff;

white-space:nowrap;

}

.sf-menu li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu li li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: #4E4E4E;

}

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #4e4e4e;

outline: 0;

}

/*** arrows **/

.sf-menu a.sf-with-ul {

padding-right: 2.25em;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator { /* give all except IE6 the correct values */

top: 11px;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}

/*** shadows for all but IE6 ***/

.sf-shadow ul {

background: url('../img/shadow.png') no-repeat bottom right;

padding: 0 8px 9px 0;

-moz-border-bottom-left-radius: 17px;

-moz-border-top-right-radius: 17px;

-webkit-border-top-right-radius: 17px;

-webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

background: transparent;

}

li.sf-search {

background: inherit;

float: right;

line-height: 25px;

}

li.sf-search input {

-moz-border-radius: 0 5px 5px 0;

padding: 3px 0;

padding-left: 20px;

margin: 6px 6px 0 0;

background: #fff url('../img/search.gif') no-repeat left center;

border:1px solid #777

}

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width:200px;

background:#726f72 !IE;

}

vekia · July 9, 2014

im affraid that this is not the file:

themes/yourtheme/css/modules/blocktopmenu/css/superfish-modified.css

you probably check wrong file in

/modules/blocktopmenu/css/superfish-modified.css

blazern · July 9, 2014

im affraid that this is not the file:

themes/yourtheme/css/modules/blocktopmenu/css/superfish-modified.css

you probably check wrong file in

/modules/blocktopmenu/css/superfish-modified.css

Oh sorry. I found it how do I get smaller font size in drop down menu (sub categories)?

vekia · July 9, 2014

the same file, search for code:

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

blazern · July 9, 2014

the same file, search for code:

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

Thanks

carlosdalk · September 16, 2014

Great ! Works!

Thanks a lot.

there is a line:

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

Great ! Works!

Thanks a lot.

shv · October 22, 2014

Hi,

I use the default bootstrap theme. Whereabout in bootstrap css can I do a similar modification?

Thanks,

shv

In yourtheme/css/modules/blocktopmenu/css/superfish-modified.css

.sf-menu > li > a {

    border-bottom: 3px solid #E9E9E9;
    color: #484848;
    display: block;
    font: 600 18px/22px "Open Sans",sans-serif;
    padding: 17px 20px;
    text-transform: uppercase;
}

peter433 · January 5, 2015

Hello,

I just want the first letter uppercase in each link in the man menu, how do i do this.

Regards

Peter

stephenrowley1 · February 2, 2015

Hi,

i see there is a 18px/22px which number must I change, why is there 2 numbers?

vekia · February 2, 2015

two numbers because one is for vertical padding, second for horizontal padding.

dioniz · February 2, 2015

@ peter433

To capitalize first letter change

text-transform: uppercase;

to

text-transform: capitalize;

dioniz · February 2, 2015

@stephenrowley1

If you mean numbers in font, first number 18px is font size and second 22px is line height

starlight · February 4, 2015

New question about same meny:

When I add subcategories they all go in a long line. is its possible to get in two lines instead?

Category1

Submenu1

sub1

sub2

sub3

sub4

Instead I want it like:

Category1

Submenu1

sub1 sub3

sub2 sub4

Working loacally so I cant give a link!

maxik · February 25, 2015

Hi,

i've found a thread on how to Center the whole top menu Buttons - not like now that the menu is starting from the left and on the right side is space.

Unfortunately my browser crashed during lunch and now i can't find it anymore.

Can someone tell me where i have to Change code so that the menu is centered?

Thank you

edit: found it!

Edited February 26, 2015 by maxik (see edit history)

hanuwant · April 23, 2015

Hi I want to change middle menu that is new arrival menu. Any suggestion.

harrisatria · May 8, 2015

i have some problem, i wanna change the WIDTH of horizontal.

how to change width of top horizontal menu?

link : sixdegreesbags.com

casys123 · June 14, 2015

Is there a way to add text above or below the search field, to tell customer how to search my site: "SEARCH BY SIZE OR BRAND". Let me know. Thanks

trevorgilligan · August 5, 2015

thanks @dioniz and @vekia and others, anyway to change the font size of the top tabs "best sellers", "top sellers"?

jenci · May 13, 2016

Hi Vekia

Thanks for the great support, I learnt a lot from your posts. I could manage all changes what above mentioned except one.

I would like to change the font size of the top horizontal menu drop down sub-sub categories.

I am selling tonners and I have a lot more menu than products.

My site : www.thelabstore.dk

If you move the cursor over for instance hp you will see the text break in 2 lines because of the size of the font, can you tell me what to modify in order to reduce the size of it.

Thanks in advance

BR. Tamas

vekia · May 14, 2016

Hi Vekia

Thanks for the great support, I learnt a lot from your posts. I could manage all changes what above mentioned except one.

I would like to change the font size of the top horizontal menu drop down sub-sub categories.

I am selling tonners and I have a lot more menu than products.

My site : www.thelabstore.dk

If you move the cursor over for instance hp you will see the text break in 2 lines because of the size of the font, can you tell me what to modify in order to reduce the size of it.

Thanks in advance

BR. Tamas

superfish-modified.css

line ~83

change font-size:13 to some other (smaler) value

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

jenci · May 15, 2016

Hi Vekia

It worked, as it should be

Thanks a lot for your help, I appreciate it a lot.

dv.dileepvarma · November 5, 2016

Prestashop version 1.6.1.8

I want to remove gap between menu and home slider.. Please help me in editing css.

Goyo · November 5, 2016

Prestashop version 1.6.1.8

I want to remove gap between menu and home slider.. Please help me in editing css.

Hi dv.dileepvarma.

I can suppose you have the default theme.

You have to edit the file your_prestashop_folder/themes/default-bootstrap/css/global.css

Around the line 5736, you can find:

header {

z-index: 1;

position: relative;

background: #fff;

padding-bottom: 15px;

}

Replace by:

header {

z-index: 1;

position: relative;

background: #fff;

padding-bottom: 0px;

}

And, around the line 5725, you can find:

#columns {

position: relative;

padding-bottom: 50px;

padding-top: 15px;

}

Replace by:

#columns {

position: relative;

padding-bottom: 50px;

padding-top: 0px;

}

After modifications you havn't the gap.

Regards.

Goyo.

alexjosh10 · February 28, 2017

Hi

you tell me which line to change until I change the appearance TOP_HORIZONTAL

/*** ESSENTIAL STYLES ***/
.sf-contener {
   clear: both;
}
.sf-right {
margin-right: 14px;
float: right;
width: 7px;
}
.sf-menu, .sf-menu * {
   margin:           0;
   padding:       0;
   list-style:       none;
}
.sf-menu {
   margin: 10px 0;
   padding:0;
   width:980px;/* 980 */
   background: #383838;
}
.sf-menu ul {
   position:       absolute;
   top:           -999em;
   width:           10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
   width:           100%;
}
.sf-menu li:hover {
   visibility:       inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
   float:           left;
   position:       relative;
   border-right: 1px solid #777;
}
.sf-menu a {
   display:       block;
   position:       relative;
   color:#fff;
   text-shadow:0 1px 0 #333;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
   left:           0;
   top:           34px; /* match top ul list item height */
   z-index:       99;
   width:auto
}
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:           100px;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
   left:           200px; /* match ul width */
   top:           0;
}

/*** DEMO SKIN ***/
.sf-menu {
   float:           left;
   margin-bottom:   1em;
}
.sf-menu a {
   display:block;
   margin-right:2px;
   padding: 0 22px 0 20px;
   line-height:34px;
   border: 0;
   text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
   color:           #fff;
   white-space:nowrap;
}
.sf-menu li li {
   background: rgba(113, 113, 113, 0.9);
}
.sf-menu li li li {
   background:   rgba(113, 113, 113, 0.9);
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
   background: #4E4E4E;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
   background:       #4e4e4e;
   outline:       0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
   padding-right:    2.25em;
   min-width:       1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
   position:       absolute;
   display:       block;
   right:           10px;
   top:           1.05em; /* IE6 only */
   width:           10px;
   height:           10px;
   text-indent:    -999em;
   overflow:       hidden;
   background:       url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
   top: 11px;
   background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
   background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
   background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
   background:   url('../img/shadow.png') no-repeat bottom right;
   padding: 0 8px 9px 0;
   -moz-border-bottom-left-radius: 17px;
   -moz-border-top-right-radius: 17px;
   -webkit-border-top-right-radius: 17px;
   -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
   background: transparent;
}
li.sf-search {
background: inherit;
float: right;
line-height: 25px;
}
li.sf-search input {
-moz-border-radius: 0 5px 5px 0;
padding: 3px 0;
padding-left: 20px;
margin: 6px 6px 0 0;
background: #fff url('../img/search.gif') no-repeat left center;
border:1px solid #777
}

/* hack IE7 */
.sf-menu a, .sf-menu a:visited {height:34px !IE;}
.sf-menu li li {
   width:100px;
   background:#726f72 !IE;
}

jonny hey · June 20, 2017

In yourtheme/css/modules/blocktopmenu/css/superfish-modified.css
.sf-menu > li > a {

    border-bottom: 3px solid #E9E9E9;
    color: #484848;
    display: block;
    font: 600 18px/22px "Open Sans",sans-serif;
    padding: 17px 20px;
    text-transform: uppercase;
}
Why this dosent work for me?

PS 1.6.1.14

Fabian90 · January 16, 2020

Hi,

just wann add somthing incase someone use another Template and different as Default do as following:

themes/xx (your Template)/css/global.css

add this line some where in Bottom :.sf-menu > li > ul { width: 50% !important; } .sf-menu > li > ul > li { width: 50% !important; }

Edited January 16, 2020 by Fabian90 (see edit history)

Reduce Font and general size of Top Menu (1.6)

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

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

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment