Joomla Templates Club 406,261 posts

[supzfier Friend supzfierJoin date: July 2011Posts: 39Downloads:0Uploads:15 Thanks: 16]

#167135

how do i change the font + font size of the main menu bar? and the home button?

[pritam Friend pritamJoin date: April 2011Posts: 609Downloads:0Uploads:29 Thanks: 11 Thanked: 125 times in 113 posts]

#404774

Hello supzfier ,

To change the font of the main menu bar

Can you please provide site url .But first go into the template manager and set css optimiation to “No” so we can see the correct files to modify not the compressed version and we can help you better.

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#404775

<em>@supzfier 257903 wrote:</em><blockquote>how do i change the font + font size of the main menu bar? and the home button?</blockquote>

Hi,
You change this code from /plugins/system/jat3/jat3/base-themes/default/css/template.css in the line #25

body.fs3 #ja-wrapper {
font-size: 100%;
}
– You change this code from /templates/ja_teline_iv/css/menu/mega.css in the line #16

#ja-megamenu ul.level0 {
font-family: ArialNarrowBold, "Arial Narrow", Arial, sans-serif;
}

[supzfier Friend supzfierJoin date: July 2011Posts: 39Downloads:0Uploads:15 Thanks: 16]

#404806

doh the font change doesnt work

<em>@khoand 257909 wrote:</em><blockquote>Hi,
You change this code from /plugins/system/jat3/jat3/base-themes/default/css/template.css in the line #25

body.fs3 #ja-wrapper {
font-size: 100%;
}
– You change this code from /templates/ja_teline_iv/css/menu/mega.css in the line #16

#ja-megamenu ul.level0 {
font-family: ArialNarrowBold, "Arial Narrow", Arial, sans-serif;
}
</blockquote>

[fdr77 Friend fdr77Join date: April 2011Posts: 104Downloads:0Uploads:39 Thanks: 13 Thanked: 3 times in 1 posts]

#404808

go to admin pannel–> template –>ja-teline-iv–>profiles and change so

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#404816

Are you using the MEGA MENU navigation option, or another (i.e. CSS, Split, Dropline) ??

If you’re using the mega menu, then this actually IS the correct CSS to modify the font and size for the menu font . . .
within templates/ja_teline_iv/css/menu/mega.css

#ja-megamenu ul.level0 {
font-family: ArialNarrowBold, "Arial Narrow", Arial, sans-serif;
}
If you’re using one of the other navigation style alternatives, then a similar css rule will be found within the relative css file for those menu types (i.e. css.css, split.css, dropline.css)

make sense?

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#404820

<em>@supzfier 257951 wrote:</em><blockquote>doh the font change doesnt work</blockquote>

Could you give me a link to your page as you said?

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#462064

I’m using dropline and need to only reduce the font size on the main menu (News, Politics, Weather, Sports, Etc.). Do I change the 100% to a different value? Aerial is fine.

---

Attachments:

1. 

Fernando

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#462065

<em>@frioman 331558 wrote:</em><blockquote>I’m using dropline and need to only reduce the font size on the main menu (News, Politics, Weather, Sports, Etc.). Do I change the 100% to a different value? Aerial is fine.</blockquote>
That is certainly one way to do it …. play around with different percentages – or pixel values – until you arrive at the result you’re happy with.

1 user says Thank You to TomC for this useful post

1. frioman

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#462069

I’m using Teline IV. Changing the percentage below did in fact reduce the size of my main menu font, but it also reduced the size of fonts in the featured area and others.

body.fs3 #ja-wrapper {
font-size: 100%;
}

My hope is to only reduce the size of the main menu font to about 85% without affecting fonts in other areas.

Fernando

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#462070

I think you may be modifying the wrong CSS rule.

So that I can try to best assist you, please provide the url of the site you’re working on,
as well as set “Optimize CSS” to “No” within your Template Manager–General Settings.

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#462071

I sent you a private message. It would also be good to reduce the empty space (left and right) between the menu names. I’m trying to fit many menu tabs on one line.

Fernando

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#462076

<em>@frioman 331558 wrote:</em><blockquote>I’m using dropline and need to only reduce the font size on the main menu (News, Politics, Weather, Sports, Etc.). Do I change the 100% to a different value? Aerial is fine.</blockquote>

Here’s what you do . . . .

Within file path –> /templates/ja_teline_iv/css/menu/dropline.css

at line 31, you will see the following:

jasdl-mainnav a {
color: #000000
display: block;
font-size: 125%;
font-weight: bold;
margin: 3px;
padding: 4px 8px 3px;
text-decoration: none;
text-transform: uppercase;
}


This is where you change both the font-size percentage value, as well as the padding values, to whatever you like.

Hope That Helps.

😎

1 user says Thank You to TomC for this useful post

1. frioman

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#462079

Thank you Tom.

Fernando

[Author]

Posts