Menu CSS Customization

• 

  foosboleros · Member · Nov 16, 2021 at 6:14 pm

  • Copy link
  • Add topic to favorites

  I am using the Sketch theme and I would like to know if there’s a CSS snippet for the following.

  1. Can you make the text on the menu bar be regular and not capitalize letters?

  2. If you click on any post in the main page, you will see that the category will appear under the title of the post. Is there a snippet to make the category disappear from posts?

  3. Is there a snippet to make the name of the site have a different font?

  The blog I need help with is: (visible only to logged in users)

• 

  staff-totoro · Staff · Nov 16, 2021 at 9:48 pm

  • Copy link

  Hi there,

  You can use the following code to turn the menu text into standard formatting instead of all-caps

  .main-navigation {
      text-transform: none;
  }

  Your posts are technically “portfolio posts” and not “blog posts” so this code will work on those but does not address blog posts (you seem not to be using blog posts

  .portfolio-type-links,
  .sep {
      display: none;
  }

  For your final question there is not really a good way to do this (substitute fonts) via CSS. Instead you may want to consider creating a “logo” on your computer that is your site title styled in the font of your choice. You can then add it to your theme’s logo settings in the customize.

  

  Hope this helps!

• 

  foosboleros · Member · Nov 16, 2021 at 10:44 pm

  • Copy link

  Thank you for the snippets. they worked perfect.

  Now, is there a snippet to put dividers into the categories of the menu bar?

• 

  staff-totoro · Staff · Nov 16, 2021 at 11:37 pm

  • Copy link

  I’m not sure I understood what you meant by “dividers” exactly. Can you tell us a bit more about what you are trying to set up?

  Thanks for the additional info!

• 

  foosboleros · Member · Nov 17, 2021 at 12:21 am

  • Copy link

  I meant to say like a divider so that the category links look separate from each other. Maybe something like this on between |

• 

  staff-totoro · Staff · Nov 17, 2021 at 1:33 am

  • Copy link

  You could try something like this;

  .menu-item {
      border-left: 2px solid #e3e1e1;
      margin-left: 8px;
  }
  
  .menu-item:last-child {
      border-right: 2px solid #e3e1e1;
      padding-right: 12px;
  }

  I’m not sure it’s needed though. To my eye (we’re not trained designers in general support, so take that into account) it seems to add more visual noise to the menu. The links were much easier to read without it was my thought.

  Hope this helps!