Menu messed up on mobile

  1. For some reason, my menu is lower, along with a weird space on the right.
    How do I fix this?

  2. The menu font is really far left on mobile. Is there a way to indent that a tiny bit?

Hello @jupebox,

Thanks for writing in!

Your logo image that you have uploaded is 700x136 pixels. The displayed dimension is 350 pixels and this is bigger in most mobile phone. Please go to Cornerstone > Theme Options > Headers > Logo (Image) and set the Image Width to at least 300 pixels or less only.

Kindly let us know how it goes.

How do I solve the font issue?

In my mobile menu, the text has no extra/white space on the left side. It is flush left.

(Also, if I change the pixels, then it seems to make the logo smaller on desktop as well, and there is a logo underneath?)

Hello @jupebox,

All of this issues is because of your custom CSS code:

@media(max-width: 640px) {
	.x-brand img { 
		    max-width: 280px;
	}
}

/* Disable logo lazy-load workaround  */
.x-brand {
    height: 68px;
    width: calc(700px / 2);
    background-image: url('https://526593.smushcdn.com/684172/wp-content/uploads/2021/06/PaperBlazerLogo.gif?lossy=1&strip=1&webp=1');
    background-repeat: no-repeat;
    background-size: contain;
		background-position-y: 0.5px;
}

@media(max-width: 640px) {
	.x-brand {
		max-height: 54.4px;
		background-position-y: 7px;
	}
}

.x-navbar .mobile .x-nav {
    margin: 25px 0;
}

Be advised that custom coding is beyond the scope of our support. If you are not the one doing this code, please contact your developer. You can either remove this code first or let your develop find the best solution that will not create an issue or compatibility with the Theme’s default styling instead.

If you want to customize the header, we highly recommend that you upgrade to the Pro theme because in the Pro theme there is the header Builder which will allow you to design your own custom header without adding any custom CSS codes.

Best Regards.

I’m confused by the second part. Are you saying I should add that code to custom CSS?

Hello @jupebox,

The code is also present somewhere in your site. If you can find it and remove the 0 which make the margin around to 25px, then your menu items will not be flushed to the left.

Cheers.