Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #7343

    How do I change the main menu on Abundance to a different font, being bold and a different color.




    in your custom.css add

    font-family:"Times New Roman" !important;
    .main_menu li a{
    color:#ff0099 !important;

    It should be pretty obvious what stands for what. Font size, font family & font color, the font-weight is for making it bold. You can obviously change the family & color etc. If you want to use special fonts you can check out this.


    Thanks… you guys are amazing! It all worked, but I would like to change the font to the Josefin that is all ready loaded as part of the theme, but I can’t seem to get it to work.

    Also, quick question, how do you reduce the space at the top (between the top of the page and the logo / search field).

    Thanks again!


    1 more question… how can I centre the main menu?



    1) You can center align the menu by adding a padding on the left – use following code in css/custom.css:

    #top .main_menu .avia_mega {
    padding-left: 40px;

    If you’d like to use the mega menu it’s not possible to change the menu position because the mega menu calculation requires a left aligned menu.

    2) The problem is that cufon fonts support only one font weight – if you’d like to use bold too you need to generate a new cufon file which contains the bold version and the standard version. However this will increase the loading times quite a bit because the file size increases.

    You need to create a new cufon javascript file here:

    At the fifth imput field from the top which is labeld: “Use the following value as the font-family of the generated font (optional)” you need to enter the word “cufon” (without quotation marks). You can get the source font file from here:

    Then replace the right font file in coronaframeworkjsfonts



    If I don’t bold the Josefin font, do I still need to go through all these steps?


    No – in this case the standard font (weight) will be used :)


    Question 1)

    So what am I missing… must be something simple.



    font-family:”Josefin” !important;


    .main_menu li a{

    color:#ff0099 !important;


    Question 2

    How do I reduce the space above the logo?

    Thanks again!



    I’m not sure, if you could link to your page I could have a look at it. It might be that you’re applying it on the main menu text in general instead of on your linked list items. Try placing your .main_menu elements in .main_menu li a.

    2) In your custom.css add

    #top .bg-logo a{margin-top:-10px;}

    Of course you can change the negative value so the logo moves up more.


    Hi Chris, I emailed you the website (normally I would post it, but this one I can’t).

    1) Want to change the main menu font to Josefin

    2) Reduce the overall size of the spacing between the top and the main menu (logo does not need to move).



    1) In abundance>js>avia.js find

    avia_cufon_helper('h1, h2, h3, h4, h5, h6');

    change this by

    avia_cufon_helper('h1, h2, h3, h4, h5, h6, #top .main_menu .avia_mega a');

    This will apply the custom font you’ve set in your settings.

    2) In your style.css find #header .container

    Between the brackets add


Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Change Main Menu Font, Color and Bold’ is closed to new replies.