CSS Menu Designer Fonts

User 219465 Photo


Registered User
324 posts

Does anyone know if you can you have different font sizes for the root item and sub item when using CSS Menu Designer? I am using HTML Editor 12.8 (I know the latest is 14 something, but this is what I have to work with for now.). It appears that the font size under the MENU ITEM section of the OPTIONS tabs is globally for both the root and sub items, but maybe there is a way to change/add code somewhere?
User 187934 Photo


Senior Advisor
20,190 posts

Yes, add a class to to all the ones you want the same.
class="largefont"

Then add the needed styling in the css
.largefont{
font-size:20px;
}

You may need to target the element holding the font more specifically.
like
#menu ul li .largefont{
font-size:20px;
}

If you share a link we can help you with that if it doesn't work.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 219465 Photo


Registered User
324 posts

Thanks Eric! I dont not have anything uploaded yet, but will post later if I need more help.
User 219465 Photo


Registered User
324 posts

Well, I tried a few things, only managed to screw it up few times. Learning though :D
Here is a link to the site. I am trying to make the sub-items that come up on the right, smaller, as there is a space issue. I may or may not have links attached to these items. Would life be easier if this is not a Menu, and go another route?

http://jerrysmarconthings.com/Test/
User 187934 Photo


Senior Advisor
20,190 posts

Try this Marc. Wrap your menu code in a div with an id of menu.
<div id="menu">All of your menu code goes here.</div>

Then your css.
#menu > ul > li > ul > li { font-size:10px;}

Also I would add alterations to a custom.css page instead of altering the existing css.
Then place the custom.css style sheet link under the others.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 219465 Photo


Registered User
324 posts

Wow, this ones is getting the best of me. I have changed a lot of files and the only thing I saw change was the actual font size for the whole menu, in the exp_menu2-menu.css.
I wrapped my code, in the body of the html with your above suggestion. Then the second part, I added that line to the menu-menu.css and the exp_menu2-menu.css files, but nothing changed. It does not help that I know little to nothing about css files, and very little about html. I am not sure where the sub menus are being called out, but I see in the html body and header call for the exp_menu2.css file. I looked into the exp_menu2,css file for a sub menu call out, but :( From there, I am not sure. Guess I need to do some homework.

User 187934 Photo


Senior Advisor
20,190 posts

Create a custom.css page and add this code to it and add it to your site in the css directory.
#menu > ul > li > ul > li { font-size:10px;}

Add a custom.css link under the other style sheet links.
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen">

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 219465 Photo


Registered User
324 posts

when I follow (or think I did) your directions and nothing happens, I believe I am way off. I like it when I make a change and things looks bad, then I see a change and go from there. Anyway, I followed you above, but I did not see any changes, anywhere. I changed the front size you suggested to 6, just to see if anything happens.

for the custom .css, I took the existing 'exp_menu2.css' file and copied it, changed the name and added the code. Maybe thats the issue? I will take one more suggestion, then I will start from scratch, by building a single menu, lees subs, and then add subs later to see the code changes. Then maybe from there take you above and I should get it. Does this sound better than frustrating you? If I haven't already :D
User 187934 Photo


Senior Advisor
20,190 posts

The only thing that should be on the custom.css is the code I posted.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 219465 Photo


Registered User
324 posts

GOT IT!!! VSD was changing the file name to custom-men.css, so I had to drop the -menu after it was uploaded. Not sure why, yet? THANKS ERIC!!! You helped me finally understand the file structure, and a little bit of the css files. I really appreciate it. I really need to get deeper into code to make my life easier, and yours :lol:

APPRECIATED!

I am in the process of a re-doing a business site, as it was using wordpress and was hacked for the umpteen time in two years. Two to three times a year something happens. Keep being told by the host that it is the "holes" in wordpress. this time it is a pharma hack. CC to the rescue :D Once the site is done, by weeks end, I will upload a link.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.