Jump to content

Split Navigation with a Logo that minimizes and snaps into place - Is it possible?

Recommended Posts

I'm currently working on a 90s themed site for karaoke. While perusing the internet for some inspiration I went onto OMSOM (krapow sauce ftw) https://omsom.com and really fell in love with whats happening on their navigation. It's split with the logo in the center and the logo starts out rather large and when you scroll down it minimizes and snaps into place. I added a few bits of code to do split and minimize the logo but I'm a noob and it just looks all wrong. The split is not spaced out in an appealing way, the minimize effect is messy and doesn't flow, and I also can't get it to ONLY have the logo large it seems to do it to the entire nav bar.

 

Any assistance is greatly appreciated! :)

Site: your-turn-karaoke.squarespace.com/
PW: 1234

Link to comment
  • Replies 5
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
  • 1 month later...

Sorry I just saw this response. I forgot to follow the topic. Close, but the issue I'm having is that the ENTIRE navigation is expanded when the logo is and then it shrinks and the navigation bar is normal sized. I'd like the navigation bar to remain one size while just the logo is larger and then shrinks on scroll. I hope that makes sense, I may not be explaining it properly 😕
And yes, split nav I meant left nav - middle logo - right social icons. I have it set up like this now with regular squarespace settings, but I can't get that logo effect to happen.

Link to comment

#1. Use this new code

img {
    transition: all 0.7s;
}
.shrink img {
    width: 70px;
    transition: all 0.7s;
}
header#header .header-title-logo a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) !important;
    z-index: 9999;
}

div.header-announcement-bar-wrapper {
    padding-top: 5vw !important;
    padding-bottom: 5vw !important;
}

#2. Do you use Personal or Business Plan?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.