Changing font sizes and sub-menu control
Support Area › Forums › Umami › Changing font sizes and sub-menu control
- This topic has 7 replies, 2 voices, and was last updated 8 years, 6 months ago by Bill Robbins.
-
AuthorPosts
-
September 12, 2015 at 19:33 #32715Rashel FeldmanParticipant
Dear Bill –
I am building a new site for a restaurant using the Umami theme. I love this theme and I know my client will, too. I have looked every within the theme and don’t find a way to control the size of two things: page header fonts and food items. Both seem a little oversized and I would like to control them on my end.
In addition, I have two places within my website where sub-menus are used: About us and Menu. If you look at my site, you will see only the About us menu but it is a great example. When you click on it, the sub-menu items open underneath the existing item. I would prefer that they “fly out” to the right where a user can click on them. Is that possible?
Thanks for all of your help,
Rashel
September 14, 2015 at 09:17 #32734Bill RobbinsModeratorGood Morning Rashel,
Great questions there. Let’s see if we can find answers for you.
Page Titles/Headings
I do need to add in an option to adjust page titles directly. There are options for the heading font and colors, but those do impact all headings. Here’s how you can target page/post titles and menu items directly:
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
h1.entry-title, h1.page-title { font-size: 28px; } h2.entry-title { font-size: 24px; } .menu-title h3 { font-size: 20px; }
The top style there is for page/post titles. The second is for blog titles in the archive view. The last one is for food item titles. Change those to fit your needs.
- Update your settings.
That should let you adjust the font sizes of those items. You can also add in colors and other CSS if you’d like to adjust them further.
Sub-Menu On Right
I believe we can do that. Here’s what I would do:
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
@media only screen and (min-width: 768px) { .slicknav_nav, .slicknav_nav ul { overflow: visible; } li.slicknav_parent { position: relative; } .slicknav_nav ul.sub-menu { position: absolute; left: 100%; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.81); } }
- Update your settings.
It’s not something I’ve tried before, but it looks like that may just work.
Another way you can achieve that is by swapping out the site’s main navigation for a more typical one. There’s a post at https://support.organizedthemes.com/forums/topic/open-navigation-menu-by-default/ that can show you how to make that happen.
Let me know if you have any questions.
Have a great week,
BillPS — Good job on the site 🙂
September 14, 2015 at 22:06 #32768Rashel FeldmanParticipantDear Bill,
Thanks for the vote of confidence. I really love what I do.
We are so close with the font sizes. Headers are now perfect. The cost of the individual food items should be downsized to match the header. Got any tricks up your sleeve on this one?
Rashel
PS The menus are perfect! Thank you.
September 15, 2015 at 08:45 #32770Bill RobbinsModeratorSorry I forgot the price is a separate entity there. Change this snippet in your Custom CSS:
.menu-title h3 { font-size: 16px; }
to be like this:
.menu-title h3, li.menu-group-item p { font-size: 16px; }
and see if that doesn’t pick up the prices in addition to the titles. Let me know if that doesn’t do it.
Have a great day,
BillSeptember 15, 2015 at 10:08 #32772Rashel FeldmanParticipantBill –
Sorry to report that this snippet didn’t do it.
Rashel
September 15, 2015 at 10:32 #32774Bill RobbinsModeratorGive this a try:
.menu-title p.price { font-size: 15px; }
September 15, 2015 at 10:38 #32777Rashel FeldmanParticipantSuccess! Let’s call this one closed!
Thank you for all of your help!
Rashel
September 15, 2015 at 10:47 #32778Bill RobbinsModeratorFantastic new Rashel. Let me know if you need anything else 🙂
-
AuthorPosts
- The topic ‘Changing font sizes and sub-menu control’ is closed to new replies.