Docs

[dreamboxiw]

Hi There,

First of all, great theme! Secondly, I really need to be able to change the height of the header on mobile on my site, http://dev.dhs-art.com. In fact, I want to be able to reduce the height of the header and also the size of the logo. I really need to shrink everything in the header down so that the art on my home page is more prominent than the header. How can I do this? I’ve searched through your Knowledgebase and none of the code you’ve provided to other people has worked for me. Please help!

Thanks,

Keith

[Jade]

Hi Keith,

Please add this CSS in the customizer:

@media (max-width: 767px) {
    .x-navbar-inner {
        min-height: 80px;
    }

    .x-brand img {
        width: 150px;
    }
}

Feel free to adjust the values in the code.

[dreamboxiw]

Ok, thanks. That helped me reduce the header height/padding below the logo, but the padding above the logo is still too much. How do I reduce that? There’s too much white/blank space above the logo and nav bar.

[dreamboxiw]

How do I get rid of all that white/blank space above the logo that is in the red box I have put in the attacehd screen shot?

[Rahul]

Hey there,

Please add the code below in your Appearance > Customize > Custom > CSS.

@media (max-width: 670px) {
    .x-navbar .x-brand {
        font-size: 25px;
    }
}

@media (max-width: 470px) {
    .x-navbar .x-brand {
        font-size: 20px;
    }
}

@media (max-width: 370px) {
    .x-navbar .x-brand {
        font-size: 15px;
    }
}

Let us know how it goes!

[dreamboxiw]

It moved the logo up, but now it is out of line with the mobile menu icon, and there’s still way too much padding above the logo. I tried changing the font size, but that didn’t work. How can I get rid of nearly all of the white padding above the logo and bring the logo and menu icon in line? I pretty much want VERY LITTLE white/blank space above the logo. Screen shot is attached. Need to reduce the space in the red box even more. We’re almost there and then I’ll leave you alone! 🙂

[dreamboxiw]

I would ideally like it to look like the attached image where I have cropped out most of the padding above the logo, but would also like the logo brought in line with the menu icon. Is that possible?

[Thai]

Hi There,

Please update the previous CSS a bit:

@media (max-width: 670px) {
    .x-navbar .x-brand {
        font-size: 25px;
        margin-top: 14px;
    }
    .x-btn-navbar {
	    margin-top: 20px;
	}
}

@media (max-width: 470px) {
    .x-navbar .x-brand {
        font-size: 20px;
    }
}

@media (max-width: 370px) {
    .x-navbar .x-brand {
        font-size: 15px;
    }
}

Hope it helps 🙂

[dreamboxiw]

Thanks a ton! That seems to have done the trick!

[dreamboxiw]

Actually, one last question: Is there any way to shrink the width of the main content area when you turn the phone to landscape view? I would like to reduce the body width so that the whole image of whatever the user is looking it shows up instead of them having to scroll down. Let me know and then we’re done! 🙂

[dreamboxiw]

Oh, and one other thing, the hamburger mobile nav menu button isn’t working now. How can I fix that? It isn’t opening up to display the site’s pages. :-/

[dreamboxiw]

Ok, so I had to update Cornerstone, and the mobile menu is working again, so got that fixed. Would still like to know about reducing the width of the body of mobile in landscape! 🙂

[Thai]

Hi There,

Please provide us with some screenshots.

Thanks.

[Author]

Posts