Question

我正在使用此网站 - http://galleriadesigns.co.uk/dev/

我遇到的问题是Nav-Bar笨重。关于如何使其更小，同时保持相同布局的任何想法。

我尝试更改（顶部和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; –}

谢谢。

Answer 1

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

由于您希望实现与Adam的主题演示类似的方面，您可能不会裁剪您的徽标，这会导致菜单比演示版更大网站，只是比较他们的大小：

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

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

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

Answer 2

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

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

降低padding（顶部和底部，25px降至10px;）

Answer 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;}

标题导航栏太大

3 个答案: