Change position of hamburger & make hamburger appear on top of logo brand image

[bluekat]

As I decrease the screen size, the hamburger moves from being aligned along the top, to moving to the bottom. I would like it to stay at the top and overlap with the brand name/image. Because the name is not big, there should be room so that the hamburger does not hide the brand name.

[nabeel]

Hi @bluekat,

Thank you for reaching out to us. To fix the issue please add the following code in the Theme Options > CSS:

@media screen and (max-width: 480px) {
    .x-brand {
        max-width: 80% !important;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[bluekat]

That works!

Now can you tell me how to remove the extra padding/margin at the bottom of the header that appears and grows larger as the brand image size gets smaller?

[friech]

Hi @bluekat,

Please add this to Theme Options > CSS as well.

@media (max-width: 480px) {
	.x-brand.img {
		float: left;
	}
	.x-navbar-inner {
		min-height: 0;
	}
}

Hope it helps,
Cheers!

[bluekat]

Thank you!

[friech]

We are delighted to assist you with this.

Cheers!