Make menu text smaller

  • 1
  • Question
  • Updated 6 years ago
  • Answered
My site is www.belfastmh.co.uk

How can I make the menu text smaller? I have a CSS override as below:

div.ys_nav {
overflow:hidden;
width:900px;
padding:0 20px;
position:absolute;
overflow:hidden;
font:normal 10px Trebuchet;

This changed the text style but not the size...
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello graham

When you edit your Site CSS in the overrides field on the left-hand side, you should only add the attributes to be changed within a tag. Otherwise your Style may not perform the way you want it to.

To change the font size of your menu links, please add this code:
div.ys_nav ul li a {

padding:5px 12px 40px 12px;
font-size: 12px;
}

You can change the font size, and the spacing on top of it on the first value for "padding".

Please let me know if you need more assistance.
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes
Excellent, thank you!

I have one more for you...

http://www.belfastmh.co.uk/products.php

On this page, can I get the sub menu to appear below the main menu items? If not, I would like to decrease the gap above and below it (between it and my logo and the PRODUCTS banner)

This is the code I used which you will not like as I have pasted everything in to the override :) This makes the menu background colour the same as the page background which I need to keep the same.

div.ys_nav2 {
font:normal 10px Trebuchet;
background:#aaa;
background:#aaa -webkit-gradient(linear, center bottom, center top, from(#333), to(#333));
background:#aaa -moz-linear-gradient(center bottom, #333 0%, #333 60%);
margin:0 20px;
padding:0;
}
div.ys_nav2 ul li a {
color:#FFF;
padding:15px 12px 15px 12px;
display:inline-block;
text-decoration:none;
font-size:15px;
}
div.ys_nav2 ul li a:hover {
color:#ffcc00;
}

div.ys_nav2 ul li.selected a {
color:#000;
background:#000;
background:#000 -webkit-gradient(linear, center bottom, center top, from(#ffcc00), to(#ffcc00));
background:#000 -moz-linear-gradient(center bottom, #666 0%, #888 60%);
font-weight:bold;
}
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi graham

Unfortunately it's not possible to place the secondary navigation right below the main navigation without giving up the banner area if the Style standard is a sandwich navigation (main navigation separated from secondary navigation by the banner area) like with the Style you chose.

But you can decrease spaces by working with margin or padding.
Edit the margin attribute in your div.ys_nav2 section e.g. like this:
margin:-15px 20px 20px;
As you can see you can also work with negative values. The values in a row of four follow a clockwise pattern, so 1st value = top, 2nd value = right, 3rd value = bottom, 4th value = left.

Hope this helps!
Photo of graham

graham

  • 18 Posts
  • 0 Reply Likes
Great, thats it! Thank you :)