Hi there,
Perhaps this CSS will help:
.slideout-toggle:not(.has-svg-icon) a:before,
.menu-toggle:before {
background: rgb(215, 185, 51);
border-radius: 5px;
padding: 5px;
}
.slideout-toggle:hover:not(.has-svg-icon) a:before {
color: white;
}
.main-navigation ul li.slideout-toggle a {
display: flex;
align-items: center;
}
Doesn’t look like you’re using the header. Have you checked out our Navigation as Header option?: https://docs.generatepress.com/article/navigation-as-a-header/
To add spacing below the navigation, try this:
#site-navigation {
margin-bottom: 20px;
}