标题导航栏太笨重答案

【问题标题】：Header navbar too bulky标题导航栏太笨重
【发布时间】：2018-11-10 13:22:36
【问题描述】：

我正在这个网站上工作 - http://galleriadesigns.co.uk/dev/

我遇到的问题是导航栏太笨重了。关于如何使它更小，同时保持相同布局的任何想法。

我尝试更改 (top 和 z-index 属性)，这只是将所有内容都推高了，看起来不太好。

我希望它与此类似 - https://www.cxwebexperts.com/themes/adam/

这是我的 CSS -

.intelligent-header {
transition: .3s;
position: fixed;
width: 100%;
z-index: 999;
transform: translateY(0%);
top: 0;
border-bottom: 1px solid #e5e5e5;

}

body.logged-in.admin-bar .intelligent-header { top: 32px; –}

谢谢。

【问题讨论】：

您要求我们为您完成这项工作。请提供代码并提出正确的问题。
body.logged-in.admin-bar .intelligent-header { top: 32px;

标签： html css wordpress wordpress-theming navbar

【解决方案1】：

对于您的 .logo 类，您的填充如下：padding: 25px 0px;

：

.logo {
    padding: 8px 0;
    transition: .3s;
}

减少padding（对于顶部和底部，即25px 降低到10px;）

【讨论】：

【解决方案2】：

如果您想知道为什么您的问题被否决，请查看以下指南：How to create a Minimal, Complete, and Verifiable example

由于您想要实现与 Adam 的主题演示相似的方面，您可能不想裁剪您的徽标，这会导致菜单比演示网站中的大得多，只需比较它们的大小即可：

您的图片高 60 像素
Adam 的徽标高 30 像素

您可能不想尝试降低徽标的高度，为初学者剪裁顶部和底部边距。

如果您想进一步修改主题的 css，您可以删除 .logo 类的 padding，或者将其设置为 0，但这可能会导致其他设计笨重.

【讨论】：

【解决方案3】：

根据您的网站链接，我发现 CSS 存在一些问题。我在这里发送 CSS

.logo {padding: 15px 0;} .logo .navbar-brand > img {width: 55px; margin: 0;} .header-middle-area #menu-primary-menu.main-menu.hover-style-one.clearfix {margin: 0;}

【讨论】：