Menu not justified

Hi there,

tricky one as the positioning is relative to the bounding box of the rotated element. If all menu items were the same length then they would align themselves. You can try updating your rotation CSS to this:

@media (min-width: 769px) {
    .main-navigation .main-nav > ul > li > a {
        transform: rotate(-52deg);
        min-width: 8ch;
        text-align: left;
    }
}

It will set each menu item to 8 characters wide ( may need tweaking ) and left align them,

but this will affect the width of each menu item....

Thanks David, that has worked great but as you mentioned, it has made the width between menu items very big. I tried the 'Menu Item Width' control in Customizer, but it is set to 0, so cannot reduce this anymore. I figured out a workaround by using a smaller but fatter font. This looks OK and should get me across the line, however, now the right hand side of the Mega Menu overhangs too much.

How do I pull the Mega Menu background back nice and even?

It has also pushed the magnifier up to the top of the navigation and if I open the magnifier while in Sticky Header, the Search box is huge?. How can I move this down and how can I keep same size search box as the normal navigation?

Thanks

You have this CSS:

nav .main-nav .mega-menu > ul.sub-menu {
    border-radius: 30px;
    padding: 20px;
}

You need to give it some border-box sizing like so:

nav .main-nav .mega-menu > ul.sub-menu {
    border-radius: 30px;
    padding: 20px;
    box-sizing: border-box;
    left: 20px !important;
    max-width: calc(100% - 40px);
}

The left and max-width properties are optional - if you want to stop the menu from touching the sides of the screen it adds 20px of side spacing.

Likewise you can do the same with your navigation-search CSS, and give it a max-height:

.navigation-search.nav-search-active {
    top: 100%;
    border-radius: 50px;
    overflow: hidden;
    background-color: #000 !important;
    border: 10px solid #000;
    max-height: 80px;
    box-sizing: border-box;
    left: 20px;
    max-width: calc(100% - 40px);
}