changing the top menu text font & size

[asood]

How can we the change the top horizontal menu font or change its size or style.

 

where is the option for that?

[elka_palka]

You mean permanentlinks such as Contact, Sitemap, Bookmark?

You can change it in file /css/modules/blockpermanentlinks in block: ul#header_links {

font-size: 20px;

}

 

for example

[Carl Favre]

Hi Ampro,

 

The easiest way for us to help you is to give us your website url and tell us exactly what you want to change.

[asood]

No not the contact, bookmark, sitemap....

 

i am talking about the black bar which contains the drop down menus..(like products category etc - which can be dded through module)

 

the top horizontal menu module.

 

i need to change the font size and style of the text on the menu

[nyett]

Did you mean the blocktopmenu module on the new presta theme?

If so, you can change the style from BackOffice, under menu Module > Menu.

[elka_palka]

Ampro, it's hard to answer to your questions because your questions is too vague.

If you're talking about font and color in titles: categories, manufacturers etc., you need change h4 in global.css

 

The best way to know what you need to change is to add add-ons to firefox: firebug and/or Web developer. It'll show you what tag you need to change.

Also you can read

http://doc.prestashop.com/display/PS14/Coding+a+theme

Good luck!

[asood]

Hi Ampro,

 

The easiest way for us to help you is to give us your website url and tell us exactly what you want to change.

 

 

Hi

In prestashop new theme 1.4.5 ---> The top horizontal menu module ---->.i want to change the font of the text that appears on the top grey menu bar...

 

how do i do it?

[Carl Favre]

Hi Ampro,

 

Is it the font you want to change?

 

[asood]

Hi Ampro,

 

Is it the font you want to change?

 

 

 

yes...this is the one...

 

and also if i want to change the color or bold or other text how to do it?

[Carl Favre]

Ok,

 

In global.css, you can add your custom font-family in :

 

 

.sf-menu {


float: left;
margin-bottom: 1em;
}

[asood]

Ok,

 

In global.css, you can add your custom font-family in :

 

 

.sf-menu {


float: left;
margin-bottom: 1em;
}

 

Sir

i have searched

 

file ------> themes --> prestashop_new ---> css ---- contains global.css file but i am unable to find the function .sf-menu anywhere in the file

 

do we need to add it?

[Carl Favre]

Oups my bad ! It is located in modules\blocktopmenu\css\superfish-modified.css

[asood]

Oups my bad ! It is located in modules\blocktopmenu\css\superfish-modified.css

 

 

Thanx buddy i have found the file and the function

but can u help me out what text(or html command) should i type in the function to get bold and font size big

[Carl Favre]

You should add:

 

font-size:14px;

font-weight:bold;

 

For font-size, if it is not enough, you can increase it.

[asood]

i have downloaded this file on my system edited it but

i am unable to change the permission for this from 644 to 666

i am using file zile ftp software and gives the message operation not permitted.

 

why is that so.

 

itried touse dremaweaver to edit the file but when i tried to uplad the changed file to webserver it showed permission denied error. then i used filezilla to change the permission but unable to do it..

 

can u tell me where is the problem?

[asood]

its done

 

thanx

[anGelDcora]

its done

 

thanx

 

how did you do? I have the same problem

[bobmartinusa]

The above mentioned is done but how to reduce the thickness of the bar ?

[Kasper ES]

I've styled the top menu to my liking, and changed the font-size under ".sf-menu a", but can someone please tell me how to give the submenu a different size?

[Kasper ES]

I've styled the top menu to my liking, and changed the font-size under ".sf-menu a", but can someone please tell me how to give the submenu a different size?

 

 

OK, this was rather obvious. I set the font-size for “.sf-menu” instead of for “.sf-menu a” and now the submenus “.sf-menu li li etc” isn’t getting overwritten any longer.

[jalil007]

How can we the change the top horizontal menu font or change its size or style.

i have tried the all but "sf-menu , sf-menu a , sf-contener............., not changed the size text for Block Topmenu

i wait for a solution please

jalil

[vekia]

How can we the change the top horizontal menu font or change its size or style.

i have tried the all but "sf-menu , sf-menu a , sf-contener............., not changed the size text for Block Topmenu

i wait for a solution please

jalil

 

what tempalte you use? default one?

please share the url if it is possible

which file you changed?

[jalil007]

i use thgr00027v template

[vekia]

i don't know this template.

please share the url

it's hard to say what you have to change without an access to the store. Moreover, you use non-default theme.

[Jiten rash (away)]

give site url and tell excatly wat u wana do

[wjohn]

I am scratching my head for a while. May be someone could help me!

I have 10 Main Categories. The categories are little long too.

The issue: For some browsers, some  categories are falling in to second line (Picture is attached)

 

Is there a way that I could set fixed width for Each Category and wrap the text so that I can keep the Categories in a single row? (See sample image)

 

Thank you for the help

[dioniz]

I am scratching my head for a while. May be someone could help me!

I have 10 Main Categories. The categories are little long too.

The issue: For some browsers, some  categories are falling in to second line (Picture is attached)

 

Is there a way that I could set fixed width for Each Category and wrap the text so that I can keep the Categories in a single row? (See sample image)

 

Thank you for the help

I don't see any attacment

[vekia]

I am scratching my head for a while. May be someone could help me!

I have 10 Main Categories. The categories are little long too.

The issue: For some browsers, some  categories are falling in to second line (Picture is attached)

 

Is there a way that I could set fixed width for Each Category and wrap the text so that I can keep the Categories in a single row? (See sample image)

 

Thank you for the help

 

what theme you use? if default, what ps version?

[wjohn]

Sorry, It's not allowing me to post the image.

 

My version is 1.5.6.2 , I am using a template from Presta theme maker. 

 

I wanted to upgrade the site to 1.6 . This is the reason i have rearranged Categories and Subcategories. 

 

my website is newbuy(.)ca

[dioniz]

Do you mean subcategories on category site?

[vekia]

i checked your website and top menu appears well

 

can you point us where the problem is exactly?

perhaps i missed something :/

[wjohn]

Hello Vekia and dioniz,

 

Thank you for the help and quick response. I have two more main categories to add. If i add them, two categories falling under second row. Currently i have disabled it. How could i add the image to this post? So that i can add the image. 

 

WJ

[wjohn]

Now you can see the error image

 

and the and the wish to have image

[vekia]

hello

 

paste this code somewhere to your stylesheet file

.sf-menu a, .sf-menu a:visited {
min=height:50px;
max-width: 75px;
display: block;
white-space: normal!important;
line-height: 16px;
text-align: center;
}

[wjohn]

Hello Vekia,

 

Thank you for the Help.

 

I did modify my superfish-modified.css file the additional code. But no success. 

 

Am i missing something?

Regards

WJ

[wjohn]

Here is my css 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

}

.sf-menu a, .sf-menu a:visited {

min=height:50px;

max-width: 75px;

display: block;

white-space: normal!important;

line-height: 16px;

text-align: center;

}

 

/* hack IE7 */

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

.sf-menu li li {

width:200px;

background:#726f72 !IE;

}

[dioniz]

Try to add this to file:

sf-menu li > a{
    width:60px;
    white-space:normal;
    text-align:center;
    text-transform:uppercase;
}

[wjohn]

Dear Dioniz,

 

I have tried. No success....

[dioniz]

Are you doing that in theme css folder? I can't tell you in which file because you have CCC on

[wjohn]

Hello Vekia / Dioniz,

We are getting there. Now another challenge. Sub category menu is also "wraped". I left it like that for you to see.... 

 

The directory i have modified is themes/xxxxx/css/modules/blocktopmenu/css/superfish-modified

 

Thank you for the help

 

Kind Regards

 

WJ

Edited May 2, 2014 by wjohn (see edit history)

[dioniz]

Looks to me same as it was

[wjohn]

Deear Dioniz,

 

Could you please check now? 

WJ

[dioniz]

ok now add this

.sf-menu li li a {
    max-width: 75px;
    white-space: nowrap !important;
    line-height:30px;

}

[wjohn]

Thank you Dioniz, Much appreciated. 

 

My sub category category names are longer. May be i have to rename it.

 

Thanks you for the help.

 

WJ

[LPreetzmann]

I have tried to change the file: /modules/blocktopmenu/css/superfish-modified.css with the codes that had been suggested but nothing works

 

I am using 1.6.0.9

 

My site: www.gourmetbussen.dk

 

I just want my top horizontal menu in one line

 

Thanks for helping

 

/Line

[vekia]

change file located in your theme /css/modules/bloctopmenu directory

after changes - clear browser cache (ctrL+f5)

[digitalimage]

change file located in your theme /css/modules/bloctopmenu directory

after changes - clear browser cache (ctrL+f5)

 

Hello I am trying to repeat what Preetzman was doing, to keep it all in one line.  I'm not following, can you re-iterate?