Jump to content

Moving header menu below second section homepage

Recommended Posts

I was wondering if anyone can help, I have found and used this code from @tuanphan which was incredible, however I am looking to put the navigation bar below the 'second section' of the homepage (while keeping the dynamic and re-appear on scroll back properties) 

Is this possible?

 

this is the code found from @tuanphan

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.2.2/twcsl.js"></script>
<script>
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});

</script>
<style>

@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(100vh - 93px)!important;
}
}

</style>

Edited by BareCreative
Link to comment
  • Replies 7
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

I have tried using this change to the code - (replacing 'first-child to 'nth-child(2) 

Which has worked but has caused the section section to have strange spacing and also lost the dynamic movement within the header navigation

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.2.2/twcsl.js"></script>
<script>
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:nth-child(2)');
    firstSection.after(header);
});

</script>
<style>

@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
}
main .page-section:nth-child(2) + #header {
  display: block;
}
main .page-section:nth-child(2) {
  min-height: calc(100vh - 93px)!important;
}
}

</style>

Link to comment

managed to solve this through - (code below) - anyone see any issues with this?

ALSO

Could anyone help with being able to enable 'scroll back' as everytime i enable it through the pre-header settings - it causes the code to break?

 

 

<style>
@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
  z-index: 10000;
}
main .page-section:nth-child(2) + #header {
  display: block;
}
</style>

<script> 
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:nth-child(2)');
    firstSection.after(header);
});
</script>

Link to comment
  • 1 year later...

Hi! I used this code and it's great, thank you. Is there any way to get the navigation links all on one line though?

image.thumb.png.84f101592f22f8ef0982d980dde7bbeb.png

 

CODE USED:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.2.2/twcsl.js"></script>
<script>
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});

</script>
<style>

@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(100vh - 93px)!important;
}
}

Link to comment
On 1/22/2024 at 11:45 PM, KCreative789 said:

Hi! I used this code and it's great, thank you. Is there any way to get the navigation links all on one line though?

image.thumb.png.84f101592f22f8ef0982d980dde7bbeb.png

 

CODE USED:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.2.2/twcsl.js"></script>
<script>
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});

</script>
<style>

@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(100vh - 93px)!important;
}
}

Use this code to Custom CSS box

nav {
	flex-wrap: nowrap !important;
}

If it doesn't work, please share site url, we can check easier

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
  • 5 weeks later...

Tried the code it worked well but its not allowing space from the other elements I have in the header (ex. button, language switcher button). It is good for most of the way but once it gets to a certain point it just goes overtop the buttons I have in the header. Is there code that can make it so that it doesn't go overtop other elements in the header? 

Link to comment
On 2/24/2024 at 6:06 AM, Jole3221 said:

Tried the code it worked well but its not allowing space from the other elements I have in the header (ex. button, language switcher button). It is good for most of the way but once it gets to a certain point it just goes overtop the buttons I have in the header. Is there code that can make it so that it doesn't go overtop other elements in the header? 

What is your site url?

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.