Change Menu Font Size Topic is solved

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
User avatar
ScoobaSteve1983
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 133
Joined: Tue Mar 01, 2011 9:53 pm
Location: Central Scotland

Change Menu Font Size

Post by ScoobaSteve1983 » Sun Sep 01, 2019 8:07 pm

Hi guys,

I have recently backed up my website and changed the hosting package to allow for an SSL certificate, and since I have done this my menu font has increased in size.

I was wondering if anyone could tell me how I go about changing the font size in my main menu?

Would it be in the template.css file? What would I be looking for?

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 26121
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: Change Menu Font Size

Post by Per Yngve Berg » Sun Sep 01, 2019 8:34 pm

You probably have mixed content. The fonts are loaded over http.

User avatar
ScoobaSteve1983
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 133
Joined: Tue Mar 01, 2011 9:53 pm
Location: Central Scotland

Re: Change Menu Font Size

Post by ScoobaSteve1983 » Sun Sep 01, 2019 8:35 pm

Any pointers on how I would tackle this issue?

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8013
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Change Menu Font Size

Post by sozzled » Sun Sep 01, 2019 8:42 pm

If the menu font size have increased relative to the font sizes used elsewhere on your website then you can adjust them with CSS.

While font sizes may be defined in a file named template.css (and you may be able to find them there), that's not where you should change them. The reason is because a file named template.css is often overwritten when you update the template. When people need to customise the CSS they should place their changes in a custom file that will not be overwritten if the template is updated.

Without knowing anything about your website, we cannot recommend what you need to change or how to change it. If you don't want to tell us any details about your website then you can probably make the changes yourself by using developers tools built into your browser. Most browsers normally display the developers tools by pressing F12 on the keyboard.

Hope that helps.
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

User avatar
ScoobaSteve1983
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 133
Joined: Tue Mar 01, 2011 9:53 pm
Location: Central Scotland

Re: Change Menu Font Size

Post by ScoobaSteve1983 » Sun Sep 01, 2019 8:48 pm


User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8013
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Change Menu Font Size

Post by sozzled » Sun Sep 01, 2019 8:53 pm

Add to the end of the file ../templates/maxedmag/css/custom.css:

Code: Select all

#s5_nav li a {
  font-size: 1em;
}
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

User avatar
ScoobaSteve1983
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 133
Joined: Tue Mar 01, 2011 9:53 pm
Location: Central Scotland

Re: Change Menu Font Size

Post by ScoobaSteve1983 » Sun Sep 01, 2019 8:56 pm

Just a case of amending the size until I have what I am look for?

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8013
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Change Menu Font Size

Post by sozzled » Sun Sep 01, 2019 8:57 pm

Did you add the CSS code to the file as I explained in my last post?
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

User avatar
ScoobaSteve1983
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 133
Joined: Tue Mar 01, 2011 9:53 pm
Location: Central Scotland

Re: Change Menu Font Size

Post by ScoobaSteve1983 » Sun Sep 01, 2019 9:01 pm

The custom.css file doesn't have anything in it, is that correct?

Just has

/* Add your own custom css to this file. You may wish to use css !important calls to override css from the template css files.
----------------------------------------------------------- */

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8013
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Change Menu Font Size

Post by sozzled » Sun Sep 01, 2019 9:04 pm

Correct. Your current file ../templates/maxedmag/css/custom.css just has what you told us in your last post.

As I wrote before:
sozzled wrote:
Sun Sep 01, 2019 8:42 pm
When people need to customise the CSS they should place their changes in a custom file that will not be overwritten if the template is updated.
So, yes, that's the file you need to edit.
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8013
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Change Menu Font Size

Post by sozzled » Sun Sep 01, 2019 9:21 pm

All fixed now?
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

User avatar
ScoobaSteve1983
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 133
Joined: Tue Mar 01, 2011 9:53 pm
Location: Central Scotland

Re: Change Menu Font Size

Post by ScoobaSteve1983 » Sun Sep 01, 2019 9:23 pm

I have allowed some scripts which I noticed there was an issue showing on my Google Chrome browser, since that it is working

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8013
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Change Menu Font Size

Post by sozzled » Sun Sep 01, 2019 9:27 pm

I'm sorry but I don't quite understand your last post.

To change the font size in the menu:
sozzled wrote:
Sun Sep 01, 2019 8:53 pm
Add to the end of the file ../templates/maxedmag/css/custom.css:

Code: Select all

#s5_nav li a {
  font-size: 1em;
}
That should be all that you need to do. :)
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8013
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Change Menu Font Size

Post by sozzled » Sun Sep 01, 2019 9:52 pm

Your menu font size problem has been fixed.

Yes, I see that you have a mixed-mode issue as a consequence of using HTTPS; some references are hard-coded with HTTP. Different problem; please start a new topic for the mixed-mode issue. OK?
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

diaz365
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Thu Oct 03, 2019 3:41 pm
Contact:

Re: Change Menu Font Size

Post by diaz365 » Wed Oct 16, 2019 6:18 pm

I'm not sure which module your or set-up you have for your menu.
Adding CSS to this alter font size. could happen anywhere in you CSS file or HTML.
the order in which your CSS is going like if template.css. whats on the top to bottom.




Code: Select all

/*********************** mod_menu ***************************/
/*\modules\mod_menu\tmpl\default_url.php*/

/*\modules\mod_menu\tmpl\default_component.php*/
span.image-title{}

/*\modules\mod_menu\tmpl\default_separator.php*/
span.separator{}


/*\modules\mod_menu\tmpl\default_heading.php*/
span.nav-header{}


/*\modules\mod_menu\tmpl\default.php*/
ul.nav menu mod-list{}
ul.nav-child unstyled small{}

Module Wrappers:

Code: Select all

/*Module Wrappers*/
/*\templates\system\html\modules.php*/

/* module suffix */

/* none */
/* no wrapper  */

/*module */
.module{}
h3.module{}
div.module{}


/*Html5 Module Wrapper*/
.moduletable{}
h3.moduletable{}
div.moduletable{}
table.moduletable{}

/*Table Module Wrapper*/
/*div.moduletable{}
table.moduletable{}*/

/*horz Module Wrapper*/
/*table.moduletable{}*/

/*xhtml ModuleWrapper */
/*div.moduletable{}*/

/*Rounded Module Wrapper*/
/*div.module{}*/

/*module outline*/
div.mod-preview{}
div.mod-preview-info{}
div.mod-preview-position{}
div.mod-preview-wrapper{}
div.mod-preview-style{}
/*end Module Wrappers*/




FreshWebServs
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Mon Oct 10, 2016 1:11 pm

Re: Change Menu Font Size

Post by FreshWebServs » Mon Oct 21, 2019 11:39 am

Hi,
Mixed content - meaning there are some hardcoded http calls (rather than https)

Looks like your template is calling http with a call to google fonts

Code: Select all

<!-- Additional scripts to load inside of the header -->

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Abel" />
Find where in the template this line is called - probably in index.php?

Quite a few other places too:

Code: Select all


<div style="display:none;">
<img alt="" src="http://www.fifeflyersihc.co.uk/images/Legends/lukacevic.jpg"/><img alt="" src="http://www.fifeflyersihc.co.uk/images/PlayerAction/ned.jpg"/></div>
Also in your menu there are http calls. These are not "mixed-content" per se, but it would be good to clean these up, especially where they point to pages or resources on your own site:

Code: Select all

<ul id='s5_nav' class='menu'><li   class='active ' ><span class='s5_level1_span1'><span class='s5_level1_span2'><a href="/index.php"><span onclick='window.document.location.href="/index.php"'>Home</span></a></span></span></li><li   class=' ' ><span class='s5_level1_span1'><span class='s5_level1_span2'><a href="javascript:;"><span onclick='window.document.location.href="javascript:;"'>News</span></a></span></span><ul style='float:left;'><li class=''><span class='S5_submenu_item'><a href="/index.php/extensions/flyers-news"><span class='s5_sub_a_span' onclick='window.document.location.href="/index.php/extensions/flyers-news"'>Flyers News</span></a><span class='S5_subtext' onclick='window.document.location.href="/index.php/extensions/flyers-news"'>Flyers News</span></span></li></ul><ul style='float:left;'><li class=''><span class='S5_submenu_item'><a href="/index.php/extensions/travel-club"><span class='s5_sub_a_span' onclick='window.document.location.href="/index.php/extensions/travel-club"'>Travel Club</span></a><span class='S5_subtext' onclick='window.document.location.href="/index.php/extensions/travel-club"'>Fife Flyers Travel Club News</span></span></li></ul></li><li   class=' ' ><span class='s5_level1_span1'><span class='s5_level1_span2'><a href="#"><span onclick='window.document.location.href="#"'>Team</span></a></span></span><ul style='float:left;'><li class=''><span class='S5_submenu_item'><a href="/index.php/roster/roster"><span class='s5_sub_a_span' onclick='window.document.location.href="/index.php/roster/roster"'>Roster</span></a></span></li><li class=''><span class='S5_submenu_item'><a href="/index.php/roster/off-ice-team"><span class='s5_sub_a_span' onclick='window.document.location.href="/index.php/roster/off-ice-team"'>Off Ice Team</span></a></span></li></ul></li><li   class=' ' ><span class='s5_level1_span1'><span class='s5_level1_span2'><a href="#"><span onclick='window.document.location.href="#"'>Stats</span></a></span></span><ul style='float:left;'><li class=''><span class='S5_submenu_item'><a href="http://elite.wttstats.pointstreak.com/teamplayerstats.html?teamid=718156&seasonid=18470" target='_blank' onclick='this.removeAttribute("href")'><span class='s5_sub_a_span' onclick='window.open("http://elite.wttstats.pointstreak.com/teamplayerstats.html?teamid=718156&seasonid=18470")'>Player Statistics - EIHL</span></a></span></li><li class=''><span class='S5_submenu_item'><a href="http://elite.wttstats.pointstreak.com/teamplayerstats.html?teamid=718160&seasonid=18469" target='_blank' onclick='this.removeAttribute("href")'><span class='s5_sub_a_span' onclick='window.open("http://elite.wttstats.pointstreak.com/teamplayerstats.html?teamid=718160&seasonid=18469")'>Player Statistics - CC</span></a></span>
And also in some content - possibly modules?

Code: Select all

<div class="custom"  >
	<p style="text-align: center;"><strong>EIHL</strong><br />Sun 10th November<br /><img title="Dundee Stars" src="/images/TeamLogos/Dundee.png" alt="Dundee Stars" width="90" height="90" /></p>
<figure style="text-align: center;"></figure>
<p style="text-align: center;"><strong>Fife Ice Arena&nbsp;</strong><br /><strong>Face-off: 5:30pm</strong><br /><a title="Online Ticket Shop" href="http://www.fifeflyers.co.uk/index.php?option=com_content&amp;view=article&amp;id=1589" target="_self"><img title="Buy Tickets Now" src="/images/Tickets.png" alt="Buy Tickets Now" width="90" height="34" /></a></p>
You'll need to go thro' you content and replace these instances with https:


Post Reply

Return to “Templates for Joomla! 3.x”