如何减少导航链接之间的间距 CSS
How to reduce spacing between navigation links CSS
所以这是我的问题...非常接近完成一些 css,问题在于关闭我 Square 上 'series' 和 'portfolios' 之间的 space space 站点。只剩下一件小东西了!!我附上了一张照片......有什么想法吗?
非常感谢!
编辑:
这是我在自定义 CSS 框中的完整代码。
#header #logoWrapper,
#header #siteTitleWrapper {
position: relative;
left: 15%;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
text-align: right !important;
}#sitetitle { text-align: left }
#header #mainNavWrapper .index {
margin: 0 0 0 100px !important;
text-align: left !important;
}
首先,我会删除您写的 CSS(包含在您的问题中),因为它必然会在不同宽度和不同设备上引起问题。挺有问题的。
相反,请尝试使用以下 CSS,它最低限度地覆盖了 Squarespace 的默认规则,易于调整,不会影响移动导航,并且在不同平台上应该更稳定。
/*Media query prevents messing up mobile nav.*/
@media only screen and (min-width: 769px) {
#header {
padding-left: 10%;
/*Adjust this as desired. Default is 30px, but looks like you have more than that in your screenshot.*/
}
#headerNav {
margin-left: 6% !important;
/*Adjust as desired. Going more than this may result in wrapped nav at ~750px.*/
}
#header #logoWrapper,
#header #siteTitleWrapper {
display: inline-block;
position: static;
transform: none;
text-align: left;
}
#header #logoWrapper,
#header #siteTitleWrapper,
#header #headerNav {
display: inline-block;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.expand-homepage-index-links #headerNav .index.home,
.expand-homepage-index-links #showOnScrollWrapper .index.home {
margin-right: 0 !important;
margin-left: 0 !important;
}
#header .folder {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
所以这是我的问题...非常接近完成一些 css,问题在于关闭我 Square 上 'series' 和 'portfolios' 之间的 space space 站点。只剩下一件小东西了!!我附上了一张照片......有什么想法吗?
非常感谢!
编辑:
这是我在自定义 CSS 框中的完整代码。
#header #logoWrapper,
#header #siteTitleWrapper {
position: relative;
left: 15%;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
text-align: right !important;
}#sitetitle { text-align: left }
#header #mainNavWrapper .index {
margin: 0 0 0 100px !important;
text-align: left !important;
}
首先,我会删除您写的 CSS(包含在您的问题中),因为它必然会在不同宽度和不同设备上引起问题。挺有问题的。
相反,请尝试使用以下 CSS,它最低限度地覆盖了 Squarespace 的默认规则,易于调整,不会影响移动导航,并且在不同平台上应该更稳定。
/*Media query prevents messing up mobile nav.*/
@media only screen and (min-width: 769px) {
#header {
padding-left: 10%;
/*Adjust this as desired. Default is 30px, but looks like you have more than that in your screenshot.*/
}
#headerNav {
margin-left: 6% !important;
/*Adjust as desired. Going more than this may result in wrapped nav at ~750px.*/
}
#header #logoWrapper,
#header #siteTitleWrapper {
display: inline-block;
position: static;
transform: none;
text-align: left;
}
#header #logoWrapper,
#header #siteTitleWrapper,
#header #headerNav {
display: inline-block;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.expand-homepage-index-links #headerNav .index.home,
.expand-homepage-index-links #showOnScrollWrapper .index.home {
margin-right: 0 !important;
margin-left: 0 !important;
}
#header .folder {
margin-left: 0 !important;
margin-right: 0 !important;
}
}