将整个标题部分减小到45px

Question

enter image description here

LINK：https://gta.stillwaters.io/

有人可以帮助我将整个标题区域的高度设置为45px吗？这大约是字体大小的3倍，并且还降低了徽标的高度。徽标和标题区域的高度似乎太长。如果可以将整个像素减少到45px？

header.hidden-phone {height: 45px;}

上面的代码似乎无效。

Answer 1

标头上有一个填充，渲染引擎向外移动。首先，它渲染具有指定高度的内部框，然后渲染一个“框架”，其中包含在每一侧指定宽度的该框。
我建议您禁用此元素上的填充。有关更多信息，请访问w3 schools box model
还有另一个属性可以帮助Box-sizing

Answer 2

您必须删除#sp-header-wrapper上的填充，以使标题达到45px。 所以改变这个：

#sp-header-wrapper {
    padding: 20px 0 !important;
}
#sp-header-wrapper {
    padding: 10px 0;
}
#sp-header-wrapper {
    padding: 10px 0;
    background-color: #FAFAFA;
    position: relative;
    width: 100%;
    z-index: 999;
}
#sp-main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0 0 1% 0;
}

对此：

#sp-header-wrapper {padding: 0 !important;}
#sp-header-wrapper {
    background-color: #FAFAFA;
    position: relative;
    width: 100%;
    z-index: 999;
}
#sp-main-menu ul {
    list-style: none;
    margin: 0;
}

然后调整徽标大小：

div#sp-logo {
    height: inherit;
}
div.logo-wrapper {
    text-align: left;
    height: inherit;
    padding: 3px;
}
img.image-logo {
    height: 100%;
}

结果如下：