Secondary Navigation Links (Absolute and Relative positioning) (CSS) - css-position

Question

All my secondary header navigation links can only go (top left, bottom left, top right, etc.).
Currently enabled as "top left", however I want two out of those four links to be "top right".
Current code works perfect, other than after the 75% resizing mark, the links discombobulate.
#media screen and (min-width: 800px)
{
a[href="/terms-of-use"]
{
position:absolute;
right:120px;
}
a[href="/privacy"]
{
position:absolute;
right:200px;
}
}

Answer 1

It has been said that using absolute positioning within flex-box will not work reliably. I'm going to guess that, because I was viewing your site in Firefox and Chrome and did not see the issue, that you are viewing your site in Safari, where the issue can be seen.
In any case, due to the above, I would recommend using Javascript in order to move the navigation items to the desired location. Then, add some additional CSS in order to get those newly-moved items to look like the others.
First, remove the CSS you've added that addresses those navigation items.
Then add this via site-wide Footer code injection:
<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>
And finally, add this via the CSS Editor:
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;
}