Move Mobile Navigation Bar

I'm using the Ready template and when my website is viewed on mobile the navigation bar appears at the bottom of the page. Is there any way for the navigation bar to be moved to the top, preferably in line or below the logo header?

Thank you!

Hi @Kassaundra. This can be done by adding CSS via the CSS Editor.

.mobile-bar {
  top: 0 !important;
  bottom: auto !important;
  border-bottom: 1px solid #ddd;
}

#navCloseToggleWrapper {
  top: 0;
}

@media screen and (max-width:768px) {
  .site-container {
    padding-top: 70px;
    padding-bottom: 0;
  }
  #navCloseToggle {
    margin-top: 20px;
    margin-bottom: 0;
  }
  #sideTrayWrapper {
    padding-top: 60px;
  }
}

Give that a shot and let us know how it goes.

Thanks so much! This worked great - just one small hang up, when I click to open the hamburger menu the navigation header is cutting off the first link in the dropdown about halfway. I've attached an image for clarity. Any thoughts?

Thanks again!

Works great, thank you!