How to change font size of navigation bar in pre-designed template.

johnnyenglish said 2 years, 7 months ago:

Is there any way I can change the font size of the navigation bar at the top of my page. The text for the links seems so small on hand held devices and in general, actually.

http://www.JohnnyEnglishMusic.com

Thanks in advance.

dg2010 said 2 years, 7 months ago:

have you figured this out yet? I would like to know as well.

Thanks!

johnnyenglish said 2 years, 7 months ago:

Not yet. If I figure it out myself, I’ll post the solution—}:~)

duncan_311 said 2 years, 7 months ago:

This can be done through Design – Advanced Style Options. The navigation style is in the CSS. Copy the css section below and paste it in the Edit View of the Theme CSS. Make sure you have the “Use Modified CSS” box checked. Change the font-size attribute to the size you would like and click OK.

.sf_navigation ul li a {
display: block;
font-size:16px;
margin:0px;
padding:6px 12px 7px;
text-decoration: none;
min-width:1%;
width: auto !important;
width:1%;
}

Hope this helps.
Thanks.
Duncan

johnnyenglish said 2 years, 7 months ago:

This did not work for me.

I pasted this:

.sf_navigation ul li a {
display: block;
font-size:24px;
margin:0px;
padding:6px 12px 7px;
text-decoration: none;
min-width:1%;
width: auto !important;
width:1%;
}

Didn’t seem to change the font.

duncan_311 said 2 years, 7 months ago:

@JohnnyEnglish,
Have you published that change? In looking at your published site, I don’t see that style in the custom.css. I can’t see your designer to see what is happening there, so I have to go by the published site.
Thanks.
Duncan

johnnyenglish said 2 years, 7 months ago:

Yes. I just tried again this time changing the font size to 30 and then I published. It still looks the same to me.

duncan_311 said 2 years, 7 months ago:

@JohnnyEnglish,
Sorry about the confusion, my fault. I wasn’t paying attention to the template you are using. Try this CSS instead of what I sent you:

.sf_navigation_top UL LI A {
font-size:24px;
}

This should work.
Thanks.
Duncan

johnnyenglish said 2 years, 7 months ago:

RESOLVED!!
That did it!
Many thanks to you, Duncan.

duncan_311 said 2 years, 7 months ago:

Glad to be of help.
Thank you.
Duncan

Mikejones110 said 2 years, 6 months ago:

A+ Duncan,

Baillee said 2 years, 6 months ago:

We’re happy to hear that you were able to resolve the issues you were having with the suggestions from @duncan_311. He’s great! Please don’t hesitate to let us know if there’s anything we can do for you in the future.

- Baillee

3MuttsCustoms said 2 years, 3 months ago:

<p>Hey Duncan,</p>
<p>I’m having the same issue only trying to go smaller on the font in the Digital Marine template. Site is http://www.leatherburnishers.com any info would be great.</p>
<p>I tried modifying the font size in this section in the css:</p>
<p>.sf_navigation {
float:left;
font-size:18px;
position:relative;
text-transform:uppercase;
width:197px;
z-index:1000;
}</p>
<p>but the change didn’t do anything noticeable. Tried adding in the line above as well with the same result.</p>
<p>Thanks in advance!
Chris
</p>

duncan_311 said 2 years, 3 months ago:

@3MuttsCustoms,
You will have to get more specific in your CSS declaration. The following will target the “a” tag of the link and change it’s size. Try chaning the number to something different and you should see the size change.

.sf_navigation ul li a {
font-size: 10px;
}

Hope this helps.
Thanks.
Duncan

3MuttsCustoms said 2 years, 3 months ago:

Hi Duncan,

Thanks for the reply. I tried adding in the declaration you posted with no luck. So then I tried adding the information to every piece in the navigation area of the css with no luck.

I tried sizing the font up and down, no luck. Any suggestions?

P.S. – you’ve been a great help so far with this site, thanks!