Jump to content

Moving header nav items on desktop & mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hey everyone. Trying to figure this out..

website I'm building: https://wisteria-koala-fmym.squarespace.com/ pw: benbenben

1) need to make the hamburger nav persistent between desktop and mobile. was able to achieve this using code shared in previous posts, but the logo always gets thrown off-center.

2) need to reposition the hamburger nav on desktop and mobile to the top left corner on desktop and mobile.

3) need to reposition the desktop CTA button to the top right (to match the margin of the hamburger menu)

I've attached an image to illustrate what i want to do. any help is greatly appreciated.

HELP.jpg

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

9 hours ago, tuanphan said:

Don't remove any code in your current code.

Add this to Custom CSS box

@media screen and (min-width:992px) {
div.header-burger, div.header-actions-action {
    display: flex;
    position: absolute;
    top: 0;
}
}

image.thumb.png.538d742c5aa2c2cdeff25cc2ceb8149a.png

thank you ! This worked to reposition everything, but my nav is still present under the logo and nothing happens (other than lines turning to X) when i click the hamburger—do i need to change visibility on any of these items in order for them to hide/show? 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.