Jump to content

Trying to duplicate author site nav and scroll

Go to solution Solved by tuanphan,

Recommended Posts

The website I linked is not mine but it is built on Squarespace, and it's what I am trying to duplicate. After several hours of trying things out, I can't figure out how he did it nor can I find any tutorials specific to this interface. 

Sample website

The elements I want to duplicate include:

- Right Hamburger nav on the desktop homepage with a slide in menu from the right. 

- His full size left facing headshot image is flush with no space on desktop. At first I thought it was a background image but when you go to mobile, his image populates up top then the site (see attached image). I have no clue how he did this. 

- Is his site essentially a blog where all the links are posts, or is it a folder with pages in the folder? 

I would be stupendously grateful if anyone could help me sort this out. Your time is greatly appreciated. 

IMG_7349.PNG

Edited by BobInAustin
missing element
Link to comment
  • Replies 6
  • Views 197
  • Created
  • Last Reply

Top Posters In This Topic

First, the example site is Squarespace 7.0 version. If you use 7.1, will need to more adjust to achieve similar effect.

Also, I guess they used Developer Mode to edit template.

- Right Hamburger nav on the desktop homepage with a slide in menu from the right. 

It is default behavior of template, no code required.

If you need to replace it to your site, please share your site url first

- His full size left facing headshot image is flush with no space on desktop. At first I thought it was a background image but when you go to mobile, his image populates up top then the site (see attached image). I have no clue how he did this. 

If you use 7.1, you can use Fluid Engine (new editor) to achieve this easier. With FE, you can edit mobile layout.

https://support.squarespace.com/hc/en-us/articles/6421525446541-Editing-your-site-with-Fluid-Engine

- Is his site essentially a blog where all the links are posts, or is it a folder with pages in the folder? 

Which element are you referring to?

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

Also, I found some of the other hamburger posts and the hamburger code always populates on the upper left versus upper right despite the fact the menu populating on the right with no clear way to click out. It doesn't look good or clean. So multiple issues just on that element alone. 

Link to comment

To get burger show on desktop, you can add this to Design > Custom CSS

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
 .header-display-desktop {
    flex-direction: row-reverse;
}
}

image.thumb.png.4eb57d355295bba63a6bba00705aab95.png

If you need more tweak with burger, you can send, we can check easier

image.thumb.png.3088657bfb9b3b03aa467c3b1e944488.png

You want to do this for homepage or which page?

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
  • Solution
On 3/31/2023 at 10:43 AM, BobInAustin said:

Hey @tuanphan

Yes, homepage. 

Here is a link to that person's website: https://www.johngreenbooks.com/

I very much appreciate the help, Tuan. 

Add to Design > Custom CSS

/* Sticky Section Homepage */
@media screen and (min-width:768px) {
body.homepage #page>article>section:first-child {
    width: 50% !important;
    float: left;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 100vh;
    z-index: 999999999 !important;
}
body.homepage #page>article>section:not(:first-child) {
    margin-left: 50%;
}
footer.sections {
    z-index: 99999999999999999999999999999 !important;
}
}

 

Edited by tuanphan

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.