二级导航链接（绝对和相对定位）(CSS)

Question

我所有的辅助 header 导航链接只能去（左上、左下、右上等）。

当前启用为 "top left"，但我希望这四个链接中的两个为 "top right"。

当前代码工作完美，除了在 75% 大小调整标记之后，链接乱七八糟。

@media screen and (min-width: 800px)
{
    a[href="/terms-of-use"] 
    {
        position:absolute;
        right:120px;
    }

    a[href="/privacy"]
    {
        position:absolute;
        right:200px;
    }
}

Answer 1

有人说。我猜测，因为我在 Firefox 和 Chrome 中查看您的网站并且没有发现问题，所以您在 Safari 中查看您的网站，在那里可以看到问题。

无论如何，由于上述原因，我建议使用 Javascript 以便将导航项移动到所需位置。然后，添加一些额外的 CSS 以使这些新移动的项目看起来像其他项目。

首先，删除您添加的用于解决这些导航项的 CSS。

然后通过站点范围的页脚代码注入添加：

<script>
(function() {
    var targetLinks = document.querySelectorAll(".Header a[href='/terms-of-use'], .Header a[href='/privacy']");
    var targetParent = document.querySelector(".Header-inner [data-nc-container='top-right']");
    var i;

    for (i=0; i<targetLinks.length; i++) {
        targetParent.appendChild(targetLinks[i]);
    }
})();
</script>

最后，通过 CSS 编辑器添加：

body:not(.tweak-header-secondary-nav-hover-style-button):not(.tweak-header-secondary-nav-inherit-styles) [data-nc-container='top-right'] .Header-nav-item {
    margin: 0 .618em;
    padding: .618em 0;
    font-family: myriad-pro;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
[data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="cart"] {
    padding-left: 33px;
}
[data-nc-container='top-left'] [href='/privacy'] {
  display: none;
}
[data-nc-container='top-left'] [href='/terms-of-use'] {
  display: none;
}

二级导航链接（绝对和相对定位）(CSS)

Secondary Navigation Links (Absolute and Relative positioning) (CSS)

css-position