
To accomplish this look for your main navigation menu in the Storefront theme, you can go to Appearance | Customize | Additional CSS and add this code:
.menu-item a{
padding-top:0px !important;
padding-bottom:8px !important;
color:white !important;
font-size:20px;
background-color:navy;
border-radius:10px;
padding-bottom:2px !important;
border:2px solid black;
margin-left:4px;
margin-right:4px;
box-shadow:4px 4px 4px silver;
margin-bottom:8px;
}
#menu-main-menu{
text-align: center;
margin-bottom:15px;
background
}
.menu-item a:hover{
background-color:blue !important;
}
.sub-menu{
background-color:transparent !important;
}
.menu-toggle{
background-color:navy;
text-align: !important;
font-size:20px;
background-color:navy;
border-radius:10px !important;
border:2px solid black !important;
margin-left:4px;
margin-right:30px;
box-shadow:4px 4px 4px silver !important;
margin-bottom:8px;
}
.menu-toggle span{
padding-right:18px !important;
}