Header Layout: same logo & button above nav menu with a dividing line in between

To achieve a header layout like this.

You can use this code to Custom CSS

/* Header layout */
.header-nav {
    width: 100% !important;
    padding-left: 0 !important;
    border-top: 1px solid black;
    padding-top: 10px;
    margin-top: 10px;
}
.header-display-desktop {
    flex-wrap: wrap;
}
nav.header-nav-list {
    width: 100% !important;
    justify-content: flex-start !important;
}

and use this code to Website Tools > Code Injection > Footer.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop .header-nav').appendTo('.header-display-desktop');
})
</script>