Jump to content
b22c

Reduce Font and general size of Top Menu (1.6)

Recommended Posts

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

 

wjvp6s.jpg

  • Like 1

Share this post


Link to post
Share on other sites

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;
}
  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Yep it's here:

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

Share this post


Link to post
Share on other sites

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 by Fanto (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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; }
  • Like 1

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)?

Share this post


Link to post
Share on other sites

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;
}
  • Like 2

Share this post


Link to post
Share on other sites

 

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Hello,

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

 

 

Regards

Peter

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@ peter433

To capitalize first letter change

text-transform: uppercase;

to

text-transform: capitalize;

Share this post


Link to post
Share on other sites

@stephenrowley1

 

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

  • Like 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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 by maxik (see edit history)

Share this post


Link to post
Share on other sites

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

how to change width of top horizontal menu?

 

link : sixdegreesbags.com

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;
}
  • Like 1

Share this post


Link to post
Share on other sites

Hi Vekia

 

It worked, as it should be :)

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

Share this post


Link to post
Share on other sites

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.

post-718783-0-19483100-1478367038_thumb.png

Share this post


Link to post
Share on other sites

 

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.

 

i want to change the font size and menu height in featured products like

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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 by Fabian90 (see edit history)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More