Menu Bar Icon Not Showing

Try this CSS to switch the order:

.main-navigation .menu-bar-items {
    flex-direction: row-reverse;
}

This is perfect Dave, only thing left is to move search icon to left right by the off convas menu toggle.

Could we do that?

Hi Sumit,

Try this:

@media(max-width:768px){
.main-navigation .menu-bar-items {
    width: calc(100% - 55px);
    justify-content: space-between;
}

.main-navigation .menu-bar-item.search-item {
    margin-right: auto;
}
}

Thanks, this worked. I see that "X" mark to close the search box is in the middle of things, could you help me move it to the far right please?

Thank you so much.

Try this:

#mobile-header .navigation-search input[type="search"] {
    padding-right: 50px;
}
.main-navigation .menu-bar-item.search-item.close-search {
    position: absolute;
    right: 15px;
}

this is perfect, thank you so much you guys are awesome.

Glad we could be of help