Squarespace Custom CSS for Menu Block Titles

Squarespace Guide

With the code below you can edit the titles of the menus in a single Menu Block.   Usually these titles for a restaurant would be Breakfast, Lunch and Dinner.  The code below lets you style these titles.  

Here is the article for Changing Menu Text.

There is lots of code here and most you will not need, but as I have found, its better to have all that you would need, as opposed to trying to create it yourself.  I am a beginner but I'm slowly learning how to code in CSS/HTML.  Leave comments or questions below.

To use: Open the side panel in your Squarespace 7 site and click Design, then click Custom CSS, then cut and paste the below code into that section.  You can edit all of the numbers and modifiers to your choosing.  

#navbuttontop:hover {
  color : black;
}

.menu-block .menu-selector label {
    font-size: 22px important!;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  text-transform: uppercase;
  background-color: #000 !important;
  padding: 6px 20px !important;
  margin: 6px !important;
}

.menu-block .menu-selector label:hover {
  color: red;
  text-decoration: underline;
  background-color: white;
}

 /*Style Menu Selections as Buttons*/ 

.menu-block .menu-selector label {
display: inline-block;
padding: 10px 1.9em;
font-size: 100px !important;
background-color: black;
    color: #ffffff !important;
padding: 5px 10px;
cursor: pointer;
margin: 0px 20px; /*Increase space between buttons.*/ 
}
 
 .menu-block .menu-selector label.menu-select-labels--active {
     text-decoration: none;
     color: #00b300;
 }