Change Menu Font Size Topic is solved

[ScoobaSteve1983]

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?

[Per Yngve Berg]

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

[ScoobaSteve1983]

Any pointers on how I would tackle this issue?

[sozzled]

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.

[ScoobaSteve1983]

Please see link https://www.fifeflyers.co.uk/

[sozzled]

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

Code: Select all

#s5_nav li a {
  font-size: 1em;
}

[ScoobaSteve1983]

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

[sozzled]

Did you add the CSS code to the file as I explained in my last post?

[ScoobaSteve1983]

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.
----------------------------------------------------------- */

[sozzled]

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

As I wrote before:

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.

[sozzled]

All fixed now?

[ScoobaSteve1983]

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

[sozzled]

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

To change the font size in the menu:

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.

[sozzled]

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?

[diaz365]

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]

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: