Site Logo and Top Menu Responsive

[anvilhasquestions]

Hi there,
I have set up a boxed-layout site with this theme and am going back through to clean it up. I have noticed that when you make your browser window skinnier, the top menu overlaps the site logo. It doesn’t turn into a drop down menu until the menu itself reaches the left side of the boxed layout. is there a way to fix this?

[anvilhasquestions]

This reply has been marked as private.

[anvilhasquestions]

Also, in mobile or a very skinny browser window, the logo does not scale at all and instead breaks outside of the boxed layout.

[Veena]

Pls include the below custom CSS in themeoptions –

@media only screen and (max-width: 1200px)
{
primary-menu {
display: none;
}}
@media only screen and (max-width: 1200px)
{
#mobile-menu-toggle {
display: block;
}}

[anvilhasquestions]

This reply has been marked as private.

[Veena]

Pls ignore the previous custom CSS and include the following custom CSS in themeoptions –

@media only screen and (max-width: 1200px)
{
#primary-menu {
display: none;
}}
@media only screen and (max-width: 1200px)
{
#mobile-menu {
display: block;
}}
@media only screen and (max-width: 1200px)
{
#mobile-menu-toggle {
display: block;
}}
@media only screen and (max-width: 479px)
{
#site-title a, #sticky-site-title a {
background-size: contain;
width: 60% !important;
}}
@media only screen and (max-width: 479px)
{
#mobile-menu-toggle {
top: 60px;
}}

[anvilhasquestions]

This worked. Thank you so much for your help!

[Author]

Posts