Changing font sizes and sub-menu control

Support Area Forums Umami Changing font sizes and sub-menu control

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://34c.2c3.myftpupload.com
  • Author
    Posts
  • #32715
    Avatar photoRashel Feldman
    Participant

    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

    #32734
    Bill Robbins
    Moderator

    Good 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:

    1. Go to your theme options page and choose the Advanced tab.
    2. 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.

    3. 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:

    1. Go to your theme options page and choose the Advanced tab.
    2. 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);
      	}
      
      }
      
    3. 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,
    Bill

    PS — Good job on the site 🙂

    #32768
    Avatar photoRashel Feldman
    Participant

    Dear 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.

    #32770
    Bill Robbins
    Moderator

    Sorry 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,
    Bill

    #32772
    Avatar photoRashel Feldman
    Participant

    Bill –

    Sorry to report that this snippet didn’t do it.

    Rashel

    #32774
    Bill Robbins
    Moderator

    Give this a try:

    
    .menu-title p.price {
    	font-size: 15px;
    }
    
    #32777
    Avatar photoRashel Feldman
    Participant

    Success! Let’s call this one closed!

    Thank you for all of your help!

    Rashel

    #32778
    Bill Robbins
    Moderator

    Fantastic new Rashel. Let me know if you need anything else 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Changing font sizes and sub-menu control’ is closed to new replies.