Changing size of mobile menu in Ethos

[dsilva512]

Hello,

I added some css to my site to bring my header logo over the header line. It looks great! But now when I open my mobile menu, the logo clashes with the menu options. Can I make my mobile menu thinner or make it open up below the header logo? Perhaps even put the menu text to the right?

[ruenel]

Hello There,

Thanks for writing in!

To resolve your issue, please only apply the css on larger screens. You need to update your code and use something like this:

@media(min-width: 980px){
  /* your custom css here */
}

We would loved to know if this has work for you. Thank you.

[dsilva512]

Hi. Sorry, that didn’t work for me. This is the css I’m using to bring the logo over the header:

.x-colophon.bottom {
padding: 5px 0;}
.x-brand { position: relative; top: 110px;}

[paul.r]

Hi,

You can try this code instead.

@media(min-width: 980px){
	.x-brand { 
		position: relative; 
		top: 110px;
	}
}

Hope this helps

[dsilva512]

Seems like I am almost there! The menu pushes itself under the logo when in mobile view. The only problem is that during mobile view, the logo gets cut off. I think it has to do with the “relative” setting in the css. Any way I can fix that?

[paul.r]

Hi,

I would like to check your site but it is currently under construction mode.

Can you provide us your wordpress admin login in Secure Note.

For the mean time, you can try adding this code in Theme Options > CSS

@media(max-width: 980px){
	    .x-brand ,	
        .x-brand img { 
		position: static; 
         }
}

I’ll list below some CSS/HTML resources that should help you to carry on these modifications on your own in the future:

Hope that helps

[dsilva512]

Sent you the login info. Tried the latest css, but that didn’t seem to work as well.
Thanks for the resources!

[jade]

Hi there,

Try updating the code to:

@media (max-width: 980px) {
    .x-brand, .x-brand img {
        position: static;
        margin-top: 0;
    }
}

Hope this helps.