Separate header height / logo size for home page

[mmelton12]

Is there a way to create an alternative header height and logo size on the homepage, perhaps with CSS or otherwise?

Thanks,
Matt

[rad]

Hi Matt,

Thanks for reaching out.

That’s possible, but overall height is controlled by the content so it will not be a simple CSS. You will have to decrease logo height, menu font size, menu spacing, and navbar inner container’s minimum height. And for that to make it specific to home page, you’ll have to prepend .home to every CSS selector you’ll add. Example

/* logo */
.home .x-brand img {
    width: 50px;
}
/* menu */
.home .x-navbar .desktop .x-nav > li > a {
    font-size: 12px;
    height: 30px;
    padding: 5px;
}
/* navbar */
.home .x-navbar-inner, .home .x-navbar-wrap {
height: 40px;
min-height: 40px;
}

Thanks!