How can I change the font size in a drop down menu?

[mariusjopen]

Dear @piero101
You want to create a dropdown on the website and then there select the font styles of the website?

Probably you need to assign Classes containing the font-styles with jQuery to the body.

Best!

Marius

[prazzo101]

This post is deleted!

[prazzo101]

@mariusjopen Ah sorry, no, you misunderstood. I don’t want to change the fontstyle of the website from a dropdown menu, I just want the links in the dropdown to be smaller than the menu button itself. Same typeface and everything, just smaller.

[ninaverena]

Any solution to this question yet? I'd also really like to change the font size of my drop-down menu. Best, nina

[prazzo101]

@ninaverena No, I didn’t get any answer. I just ended up not using a drop down menu at all.

[ninaverena]

ok, thanks anyway. :) Best, nina

[Richard]

Dear @ninaverena @piero101

Ah older thread!
Have just seen this now, apologies for the delay!

Could you both please post a link to your website with the drop-down menu in question and i can take a better look :)

Best wishes
Richard

[prazzo101]

@Richard-Keith Thanks Richard, but that state of the website is long gone now ;) Still looking forward to any input for the future because that question will definitely pop up again for me. Thanks!

[Richard]

Dear @piero101

Thank you for the kind reply :)

Best wishes and i will be ready when the time comes!

Sincerely
Richard

[ninaverena]

Hey @Richard-Keith :)
My website is not yet online. But here is a screenshot. I was wandering whether it is possible to change the font / font size of the menu items (portrait, advertising, etc.)?

[ninaverena]

[Richard]

Dear @ninaverena

I understand that sometimes access to the website is not possible :)

I hope i can run you through and you apply this to your case:

For this we will need help of the Inspection tools provided within Google Chrome's browser:
https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

along with adding our own Custom CSS within "Lay options- custom css & html" :

When we right click on your webpage we can choose "inspect" from the menu:

So clicking on the menu which you wish to change:

Here on the left we have some related data, that we will use to target the menu with CSS e.g:

.menu-item-171

a

[data-id="10"]

span

I changed my menu item's font size by targeting it like this:

.menu-item-171 a {
    font-size:48px;
}

Because this is a link <a> i have added the 'a' to be sure that the change occurs, you could also target it further to be sure by adding 'span' to the code.

I hope this help's you - target the Menu-item area or the individual menu-items this is your choice - then use 'font-size:20px;' ( change the 20 px to your preferred size ) - adding the code to Custom CSS

Let me know how you go! :)

Best wishes and have a wonderful day

Sincerely
Richard

[ninaverena]

dear @Richard-Keith, thanks so much for your detailed help! Whoop-whoop - I did it! ;) (although now I'm not sure if I really like it better.. :) ) All the best, nina

[Richard]

Dear @ninaverena

Great to hear! :)

Best wishes and good luck on the rest of your Lay Theme Journey

Sincerely
Richard

[ninaverena]

thanks a lot! :)