How do I change the main menu on Abundance to a different font, being bold and a different color.
Thanks!
Change Main Menu Font, Color and Bold
11 posts from 3 voices- Started 1 year ago by oncorsolutions
- Latest reply from Chris Beard
- This topic is not a support question
-
Hi,
in your custom.css add
.main_menu{ font-size:25px; font-family:"Times New Roman" !important; } .main_menu li a{ color:#ff0099 !important; font-weight:bold; }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.
Posted 1 year ago # -
oncorsolutions
MemberThanks... 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!
Posted 1 year ago # -
Hey,
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:
http://cufon.shoqolate.com/generate/
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: http://www.fontsquirrel.com/fonts/Josefin
Then replace the right font file in corona\framework\js\fonts
Posted 1 year ago # -
Hi,
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.
Posted 1 year ago # -
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
margin-top:-20px;Posted 1 year ago #
Reply
You must log in to post.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
