I used the following code to create a secondary navigation with a centered logo:
<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+4)") .prependTo (".header-actions--right");
});
</script>
However, the navigation on the left will default to two lines if the screen is smaller - there is a lot of padding in between the logo and on the side of the left screen. Additionally, the give button at the top right is being cut off the screen. I just wanted to figure out how to adjust either the spacing or to make sure everything is centered and aligned correctly. At the very least to fix the button being cut off at the top right.
Anyone know how I might fix this?