我正在这个网站上工作-http://galleriadesigns.co.uk/dev/
【WP标头导航栏太庞大】我的问题是导航栏过大。关于如何缩小尺寸, 同时保持相同布局的任何想法。
我尝试更改(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;
–}
谢谢。
#1对于你的.logo类, 你的填充如下:padding:25px 0px;
:
.logo {
padding: 8px 0;
transition: .3s;
}
减小填充(顶部和底部, 即25像素到10像素;)
#2如果你想知道为什么你的问题遭到拒绝, 请查看以下准则:如何创建最小, 完整和可验证的示例
当你想要实现与Adam主题演示类似的方面时, 你可能不希望裁剪徽标, 这会使菜单比演示网站大得多, 只需比较它们的大小即可:
- 你的图片高60像素
- 亚当的徽标高30像素
如果你想进一步修改主题的css, 则可以删除.logo类的填充, 或将其设置为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; }
推荐阅读
- 在WordPress中隐藏评论
- header_image()未在自定义主题中显示
- Gutenberg模板(核心块属性)
- 在WordPress中使用PHP glob()时遇到问题
- Vue3.0知识点大汇总|【Vue3中的响应式原理】
- Vue3.0知识点大汇总|【Vue3中watch属性详解】
- 花了30天才肝出来,史上最全面Java设计模式总结,看完再也不会忘
- 征文|@程序员,你读过的书,藏着自己的命运程序人生
- mysql 同表 父子关系查询 亲测可用