make font bigger on menu buttons

  • 1
  • Question
  • Updated 5 years ago
  • Answered
How can you make the font bigger on the menu buttons please?

Thanks
Ian
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
  • sad

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi ian.page17

If you have Yola Silver, try putting this into your Custom CSS:


#menu, #sys_navigation {
font-size: 14px;
}



That will make the menu font 14px. You can change '14' to whatever you wish the size to be.

Kind regards,
Nathan
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
Umm I have Yola silver and copied that into my custom CSS however it does not make my font any larger.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi ian.page17

Is the "Disable Site CSS Overrides" check box checked? If it is, that's why the font size isn't being applied.

When you're in the CSS editor, could you try unchecking that and see if that works? I have provided some screen shots below.



Make sure that's unchecked.



Then, click on "OK".

I hope this helps.

Kind regards,
Nathan
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
Hi Nathan

Thanks for your help but unfortunately I still can't get the font on my menu buttons to increase in size.

I'm confused now!

Ian
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi ian.page17

Do you have a custom menu? Also, can you let me know what your site's URL is?

Nathan
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
www.leedsunitedtillidie.co.uk
I don't think I have a custom menu It is the menu that came with the style I selected.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks for sharing your URL. Yeah, you don't have a custom menu.

I found out why the font isn't enlarging. Try putting the following code into the Custom CSS section instead.


.ys_nav, .sys_navigation {
font-size: 14px;
}



Please let me know if this works.

Kind regards,
Nathan
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
Nathan It's making the black box bigger but not the font
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
It's only making the box bigger on yola not via my url
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
forget the last post mate
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Can you just try this then:


.ys_menu {
font-size: 14px;
}



Nathan
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
I'm confused mate if i go to my site via yola the box is bigger but if i type my url in chrome then box is not bigger. font still unchanged
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
Boxes are bigger both ways now mate
Photo of ian.page17

ian.page17

  • 10 Posts
  • 0 Reply Likes
Another thing mate should the code be one line with no spaces?
Photo of Ian Page

Ian Page

  • 6 Posts
  • 0 Reply Likes
Still can't get font any bigger!!
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Ian,
Our HTML team will be happy to look into this with you, however, they are not currently online. Please allow them time to review your case and get back to you in this regard.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Ian,

Can you try putting this into your Custom CSS and making sure the "Disable Site CSS Overrides" isn't checked:


.ys_nav {
font-size: 14px;
}



Make sure to remove the old CSS and put in this new CSS.

I hope this helps.

Kind regards,
Nathan
Photo of Ian Page

Ian Page

  • 6 Posts
  • 0 Reply Likes
Hi Nathan

Tried the above but this does not make the font bigger :(
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wow this is a challenge! :) Could you try this for me:


.ys_nav {
font-size: 14px !important;
}



Once you pasted this in the Custom CSS (Style>Edit Custom CSS...) click "OK"

Nathan
Photo of Ian Page

Ian Page

  • 6 Posts
  • 0 Reply Likes
This does not work either :(
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
How about this one:



div.ys_nav ul li a{
color:#fff;
display:inline-block;
padding:13px 15px 12px 15px;
font-size:13px;
text-decoration:none;
white-space:nowrap;
}



Change font-size to the size you want.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wow Diane, great job! I think that should work. I forgot that it's an <a> tag so you have to use that.

P.S Didn't your badge use to say "Employee"?
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Diane is awesome, isn't she? We loved the job she did as a Champ so much that we contracted with her to join our support team on a part time basis. That contract has come to an end but she will stay a part of our community and we have given her back her Champ badge because she most certainly deserves it!

So Diane's status has changed again, but we are not saying good bye because here she still is, doing what she does best!

Go Diane!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, Diane is awesome! :) Thanks, Monique, for explaining it to me.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
{blush}
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Diane has hit the nail on the head :) Please let us know if you have any further troubles with this!
Photo of Ian Page

Ian Page

  • 6 Posts
  • 0 Reply Likes
Thanks very much Diane, Nathan and everyone else you are the best!!!
Photo of William Granger

William Granger

  • 2 Posts
  • 0 Reply Likes
I need help with the exact same problem, none of the above suggestions have been of use :(
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi William,

Custom CSS is still the best way to achieve this but this thread is a year old. I suggest creating a new topic and be sure to include your site link. Our community may be able to suggest more current code to suit your needs.