You are targeting the wrong element. Use this piece of code for increasing the main menu item font-sizes:
.menu li a {
font-size: 25px;
}
To increase sub menu size:
#site-navigation ul.menu ul a {
font-size: inherit;
line-height: inherit;
}
Let me know if that works.
Regards
Gautam,
Thanks very much for responding. The code you suggested worked for the sub menu items, but the 3 main menu items did not change.
Modify the selector to ul.menu li a and it should work then.
Thanks
Your entries will also not work because you have a syntax error in your custom CSS. Here:
/* code to remove blank line above ul on home page*/
#books{
margin-top:-2.00%;}
}
/* end code*/
There is one } too much. Correct would be:
/* code to remove blank line above ul on home page*/
#books{
margin-top:-2.00%;
}
/* end code*/
The CSS code added afterwards should also be recognized and interpreted.
Another syntax error:
.entry-more a {color: ffffff;}
Correct would be:
.entry-more a { color: #ffffff;}
And:
c padding: 0px 10px;
would be correct:
padding: 0px 10px;
It might be a good idea to validate individual CSS code before you insert it there. You can do this with numerous editors. Or here in the browser: https://jigsaw.w3.org/css-validator/#validate_by_input
Yes and after validating also if it does not work then add !important to the property value like this:
ul.menu li a {
font-size: 25px !important;
}
Although it is not a recommended method as the codebase can quickly get dirty and you should instead work on resolving the CSS specificity.
Thanks
threadi,
Thanks for the corrections. The main menu font is now working but I had to have the following code:
.menu li a {}
ul.menu li a { font-size: 25px;}
#site-navigation ul.menu ul a { font-size: inherit;
line-height: inherit;}
Not sure why both menu li entries are required, I tried removing each and without both, it does not work.
Many thanks to both Gautam and threadi for all your help! I really appreciate it!
Hi @jimtturner
You can safely remove the .menu li a {} empty ruleset. It has no functional purpose.
Glad I was able to help!
Regards
When I remove the . menu li a {}, the main menu text size does not increase.
Then you remove it incorrectly and create a syntax error. Pay close attention to the spelling, especially the { and }.
So, I validated all my CSS with the line in question and then I validated the CSS without the line in question. Both resulted in no errors. When the line is removed, the main menu text increase does not work. When the line is in the code, it works. No clue why, but I’m getting the result I want with the line of code in.
You are still using incorrect CSS. And this concerns the line exactly before the one you don’t need:
/* This code will increase the text size in the main */
/ * menu and sub menus. */
.menu li a {}
ul.menu li a { font-size: 25px;}
There is one space too many before the leading “*” in “menu and sub menus”. This would be correct:
/* This code will increase the text size in the main */
/* menu and sub menus. */
ul.menu li a { font-size: 25px;}
Wow, you are absolutely right. I guess the validator does not validate comments.
Thanks again, threadi, you have been a BIG help! Much appreciated!
+
