mtaus+ 8 Report post Posted March 30 I'm trying to increase the font size in a sub menu on this site: https://www.citroncatering.com I added the following CSS: sf-menu ul li a {font-size: 16px !important;} But it's not working. Any suggestions? Share this post Link to post Share on other sites
edgarcheverier+ 23 Report post Posted March 31 Hi, you need to use this CSS: .sf-menu ul li a { font-size: 16px !important; } right now it's in 12px; 1 Share this post Link to post Share on other sites
mtaus+ 8 Report post Posted March 31 (edited) @edgarcheverier I tried that but it's not working (screenshot). Also notice how much extra space is on the right side of the menu... how can I adjust the drop down menu width so that it's 100% of the menu text? Edited March 31 by mtaus (see edit history) Share this post Link to post Share on other sites
edgarcheverier+ 23 Report post Posted April 1 Try adding more difference in the font-size and without the important option, for the text you can use text-align: center. Here an example: https://cl.ly/3Q140m290d1F Share this post Link to post Share on other sites
chrisayers+ 81 Report post Posted April 1 You can have a good bit of "fun" in the CSS for .sf-menu. The text-size, alignment, and paddings may help you. You can also decorate it a good bit. The dropdown width would vary a good bit due to your page name lengths. Here is a few things that you can try in order to meet in the middle. .sf-menu ul li a { display: block; position: relative; background-color: #ff6600; border-bottom-width: 1px; border-bottom-style: solid; box-shadow: 0px 8px 10px 0px rgba(102,102,102,0.4); text-align: center; font-size: 18px; line-height: 13px; padding: 14px; } .sf-menu ul li { display: block; position: relative; background-color: #ff9933; border-bottom-width: 1px; border-bottom-style: solid; box-shadow: 0px 8px 10px 0px rgba(102,102,102,0.4); text-align: center; font-size: 18px; line-height: 13px; padding: 14px; } Or round the corners some as well. .sf-menu ul li a { display: block; position: relative; background-color: #ff6600; border-bottom-width: 1px; border-bottom-style: solid; border-radius: 10px; box-shadow: 0px 8px 10px 0px rgba(102,102,102,0.4); text-align: center; font-size: 18px; line-height: 13px; padding: 14px; } I hope this gets you pointed the right way. 1 Share this post Link to post Share on other sites
mtaus+ 8 Report post Posted April 2 On 4/1/2018 at 12:20 AM, edgarcheverier said: Try adding more difference in the font-size and without the important option, for the text you can use text-align: center. Here an example: https://cl.ly/3Q140m290d1F @edgarcheverier I've updated the font to 22px but still not displaying. Also you can check the source code and you will see that the CSS is included in the page, even though it's not displaying. Share this post Link to post Share on other sites
edgarcheverier+ 23 Report post Posted April 2 ok, can you try this one also: .menu-item a { font-size: 22px !important; } Share this post Link to post Share on other sites
mtaus+ 8 Report post Posted April 2 @edgarcheverier that didn't work either Share this post Link to post Share on other sites
edgarcheverier+ 23 Report post Posted April 3 Let's try with the ID, did you test your CSS editor in order to see if it's working correctly? #menu-item-1255 a { font-size: 22px; } Share this post Link to post Share on other sites
mtaus+ 8 Report post Posted April 3 @edgarcheverier I tried that CSS and it is also not working. Yes I believe see the CSS editor is working because the css is displaying in the inspector. Share this post Link to post Share on other sites