Fixed position for site header stretches the background image back and forth while scrolling

So I'm trying to use this website as my portfolio and thus need the navigation bar stuck on top while users view the case study. This stretches the top background image and then squeezes it back when the user scrolls down. I need a fix for this as it's making my landing page horrendous, and the overall UX of the site subpar. 

Here is my site for reference:
https://www.dipendrasingh.design/
 

Hi,

Do this for Nav bar only or whole header (logo + nav bar)?

On 12/15/2022 at 1:57 AM, tuanphan said:

Hi,

Do this for Nav bar only or whole header (logo + nav bar)?

I'm sorry the whole header, if I put it to fixed + scroll back, it keeps stretching and squeezing the background image of the first section

Add to Design > Custom CSS

header#header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
body.homepage article section:first-child {
    padding-top: 0px !important;
}

Hi @tuanphan

I need custom css help as I would like my name and site title (which is on the right at the moment) to be on the left hand side, and the navigation bar (which is on the left at the moment) to be on the right hand side.

Also, is it possible with custom css to have pictures be movable to the viewer (via click and drag)? OR is there custom css which allows me to change the spacing/positioning of the pictures? 

website: https://cobalt-semicircle-k87m.squarespace.com/config/

Thank you!

9 hours ago, Nasreen said:

Hi @tuanphan

I need custom css help as I would like my name and site title (which is on the right at the moment) to be on the left hand side, and the navigation bar (which is on the left at the moment) to be on the right hand side.

Also, is it possible with custom css to have pictures be movable to the viewer (via click and drag)? OR is there custom css which allows me to change the spacing/positioning of the pictures? 

website: https://cobalt-semicircle-k87m.squarespace.com/config/

 

Thank you!

Add to Design > Custom CSS

#navigator .siteTitle {
    float: left !important;
}
#navigator header#topBar ul#nav {
    float: right !important;
}

Thanks @tuanphan ! Is it possible via custom css in the header to have "Humans of High Fashion" on the far right hand side? 

On 1/4/2023 at 12:46 AM, Nasreen said:

Thanks @tuanphan ! Is it possible via custom css in the header to have "Humans of High Fashion" on the far right hand side? 

Move this?

Yes @tuanphan, just the Humans of High Fashion portion. 

Left hand side:

Nasreen Hussain

Art Direction & Styling

Right hand side:

Humans of High Fashion

On 1/6/2023 at 10:29 PM, Nasreen said:

Yes @tuanphan, just the Humans of High Fashion portion. 

Left hand side:

Nasreen Hussain

Art Direction & Styling

 

Right hand side:

Humans of High Fashion

Hi. Like this?

Hi @tuanphan

that looks good, but can the "Art direction & Styling" be underneath "Nasreen Hussain"? and Nasreen Hussain in slightly bigger font too

@tuanphan 

"Nasreen Hussain" in same font size as "Humans of High fashion"

Art Direction & Styling underneath Nasreen Hussain

hi @tuanphan can you assist with the above?

On 1/7/2023 at 6:24 PM, tuanphan said:

Hi. Like this?

@tuanphan can you put Nasreen Hussain in the same font style and size as "humans of high fashion"? And can you put "Art Direction & Styling" underneath Nasreen Hussain? 

Add to Design > Custom CSS

@media screen and (min-width:901px) {
.siteTitle h1 {
    position: absolute;
    right: 0;
}

#navigator .siteTitle {
    position: static;
}

h2.logo-subtitle {
    font-size: 36px !important;
    font-family: 'MADE SAONARA 2' !important;
    margin-top: 0 !important;
}

ul#nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
}
}

2 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:901px) {
.siteTitle h1 {
    position: absolute;
    right: 0;
}

#navigator .siteTitle {
    position: static;
}

h2.logo-subtitle {
    font-size: 36px !important;
    font-family: 'MADE SAONARA 2' !important;
    margin-top: 0 !important;
}

ul#nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
}
}

 

@tuanphan thanks - I did input this code and it looks wrong:

 

@tuanphan please advise at your earliest, thank you!