Changing Top Horizontal Menu Font

[stoo_s]

First post and relatively inexperienced with creating my own website, so please be gentle!

 

I'm keen to change the standard sans-serif font in the top horizontal menu bar to a font that I have found and downloaded. I have converted the file so that I have a .ttf, .woff, etc. and a stylesheet. I've placed this in the same file as the global.css file and have changed the font in the superfish-modified.css text to reflect the new font I want to use as follows:

 

.sf-menu > li > a {
    font: 600 18px/22px "orange_juiceregular";
    src: url("../shop/themes/default-bootstrap/css/orangejuice/stylesheet.css");
    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; }
 

I have also added to the global.css text as follows:

 

@font-face {
 font-family: orange_juiceregular;
 src: url("../shop/themes/default-bootstrap/css/orangejuice/stylesheet.css");}

 

 

From reading around I've done everything that I should have done, but must be missing something as it's still not working. I've made this work on another (non-prestashop) website so know it isn't the font or relevant files. Any ideas would be greatly appreciated...

 

[PascalVG]

Did you

- Go to Advanced Parameters ->Optimization, and (Temporarily!!):

   - force compilation

   - turn off cache

 

- clear your browser cache?

 

after it works, don't forget to set the optimisation settings back.

 

hope this works. if not, please add URL to site.

pascal

[stoo_s]

Hi Pascal,

 

Thanks for your help but unfortunately that still didn't work. Does the text appear correct to you? Site address is www.thelearningemporium.co.uk/shop

 

Stoo

[mickeyboy1]

Are you sure you have edited the correct file ??????

 

Font is still the same.

 

See attached for correct directory to change code

 

[stoo_s]

It was the superfish-modified.css file that I edited so I don't understand why the style tab indicates that the font is still sans-serif. The line I edited is the line above in my original post. I found this on an old thread... have I edited the wrong line?

[mickeyboy1]

This is what you have at the moment in shop/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

should be line 60

 

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

}

 

Are you sure you havent changed shop/modules/blocktopmenu/css/superfish-modified.css ????

Edited November 21, 2014 by mickeyboy1 (see edit history)

[stoo_s]

I'm not really sure what happened there, but i've changed it again and still no joy.

[stoo_s]

Bump!

 

I'm still looking for help with solving this problem. I've run out of options and changes that I can make and currently have the following in the global.css file:

@font-face {
    font-family: 'orange_juiceregular';
    src: url('shop/themes/default-bootstrap/css/orangejuice/orange_juice_2.0-webfont.eot');
    src: url('shop/themes/default-bootstrap/css/orangejuice/orange_juice_2.0-webfont.eot?#iefix') format('embedded-opentype'),
         url('shop/themes/default-bootstrap/css/orangejuice/orange_juice_2.0-webfont.woff') format('woff'),
         url('shop/themes/default-bootstrap/css/orangejuice/orange_juice_2.0-webfont.ttf') format('truetype'),
         url('shop/themes/default-bootstrap/css/orangejuice/orange_juice_2.0-webfont.svg#orange_juiceregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

 

Should this be in a specific place in the global.css file? I have it near the top at the moment but didn't think that placement would make a difference.

 

In the superfish-modified.css file I currently have:

 

.sf-menu > li > a {
    font: 600 18px/22px "orange_juiceregular", sans-serif;
    src: url("shop/themes/default-bootstrap/css/orangejuice/orange_juice_2.0-webfont.eos");
    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; }

 

Any help would be much appreciated!

[mickeyboy1]

Hey stoo, i have checked your site again tonight and it seems you have changed the font for top menu 1st level. but you still have sans serif listed..

 

But you still need to make changes here in superfish_modifies.css for second level text

.sf-menu > li > ul > li > a {
    color: #333333;
    font: 600 16px/20px "Open Sans",sans-serif;
    text-transform: uppercase;
}

 

Check the line numbers in the pics with the same line numbers in your css file

Edited November 25, 2014 by mickeyboy1 (see edit history)

[stoo_s]

I've changed the 2nd level text and have also deleted the sans-serif text from both lines now, but it's still not changing to my custom font. Thanks for the continued suggestions though!

[stoo_s]

Bump again!

 

Still no joy with this issue and I'd really like to solve it this side of Christmas . Does anyone have any other suggestions as to why my new font is still not displaying on the top horizontal menu?

 

Thanks in advance

[mickeyboy1]

It looks like it has changed from here mate...

 

 

Have you cleared all your caches  ???

 

Oh and your images in the homeslider still have urls linking back to prestashop

Edited December 16, 2014 by mickeyboy1 (see edit history)