Jump to content

Move Mobile Navigation Bar

Recommended Posts

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!

Link to comment
  • Replies 3
  • Views 688
  • Created
  • Last Reply

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

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!

IMG_2351.PNG

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.