Stacked header in-between mobile and tablet on GeneratePress
@media(min-width:768px) AND (max-width:1000px) {
.inside-header {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#site-navigation {
background: #f3f7fb;
border-radius: 6px;
padding: 10px;
}
#site-navigation ul li a {
background: #f3f7fb;
padding: 0 15px;
}
#site-navigation ul ul li a {
background: #44b3c7;
padding: 10px;
}
#site-navigation ul ul li a:hover {
background: #004075;
}
}