I used Squarestylist's tutorial here: https://www.squarestylist.com/blog/secondary-navigation
I got the spacing figured out, but now when it looks fine on home page, but when you click any subpage, two of the menu items disappear.
Footer code injection:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".header-display-desktop .header-nav-item:nth-child(n+3)") .prependTo (".header-actions--right");
});
</script>
CSS:
.header-actions .header-nav-item {
padding-right:2.1vw !important; /**change as needed**/
}
.header-nav-list {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:end !important;
-ms-flex-pack:end !important;
justify-content:flex-end !important;
.header-nav-item {
padding-right:2.1vw !important; /**change as needed**/
}
}
.header-actions--right {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}
.header-actions .header-nav-item {
padding-right:2.1vw !important;//change as needed
}
.header-nav-list {
display:flex;
justify-content:flex-end !important;
.header-nav-item {
padding-right:2.1vw !important; //change as needed
}
}
.header-actions--right {
display:flex;
justify-content:space-between;
}
.header-display-mobile .header-nav-item.header-nav-item--collection {
display:none;
}
