Jump to content

How do I move my navigation bar below my header banner in 7.1?

Recommended Posts

On 1/17/2022 at 3:06 PM, ferguswood said:

Clickable text please - https://caminodelvino.co.uk/

Thank you. Sorry for delay.

I clicked on link & it redirects to product page. Which position on product page do you want to add a text?

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
  • 2 months later...

Hello, we wanted to have the menu below an image gallery (for homepage only) with links so I added a menu block and removed the actual menu buttons. But now, it looks pretty bad on mobile and i have to update every single page of any new menu button that needs to be added. Is there a CSS code that you can share to move the menu buttons below the gallery for the homepage only. The menu bar can stay on top for the other pages. 

image.thumb.png.8313f65a901589a3f5364b595a550e53.png

Really appreciate this. 

Link to comment
  • 4 weeks later...
On 4/20/2022 at 1:01 AM, Mary_DG said:

Hello, we wanted to have the menu below an image gallery (for homepage only) with links so I added a menu block and removed the actual menu buttons. But now, it looks pretty bad on mobile and i have to update every single page of any new menu button that needs to be added. Is there a CSS code that you can share to move the menu buttons below the gallery for the homepage only. The menu bar can stay on top for the other pages. 

image.thumb.png.8313f65a901589a3f5364b595a550e53.png

Really appreciate this. 

Sorry. Missing your comment. Have you solved it yet?

On 5/16/2022 at 1:18 PM, cameronjaisun said:

Hello I was wondering if there is a script/code to move the menu bar to the side like this website.

https://www.willemverbeeck.com/

Thanks!

Can you share link to your site? 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
  • 3 weeks later...
On 6/6/2022 at 11:57 PM, Mary_DG said:

Hello tuanphanno I have reverted to using the menu buttons for other pages and hid it on the homepage and continued to use Block Menu. Problem I am facing now is responsiveness of the text in different screensizes. website: https://www.formebar.com/

You can consider using Text Block with bullet list, then we can target it easier with CSS to adjust responsive

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

Hi there @tuanphan @bangank36,

Got a little lost in this thread. I am trying to implement something similar for a client's site where the header nav is below the hero banner JUST for the home page. Is this doable? 

https://collie-blue-teb7.squarespace.com/home
attached image for what I'm trying to achieve.

Ideally Id like to keep the scroll action where the logo is smaller when scrolling.

Thank you for your time and attention.

Screen Shot 2022-06-10 at 6.42.31 PM.png

Link to comment
On 6/11/2022 at 5:43 AM, jesswp said:

Hi there @tuanphan @bangank36,

Got a little lost in this thread. I am trying to implement something similar for a client's site where the header nav is below the hero banner JUST for the home page. Is this doable? 

https://collie-blue-teb7.squarespace.com/home
attached image for what I'm trying to achieve.

Ideally Id like to keep the scroll action where the logo is smaller when scrolling.

Thank you for your time and attention.

Screen Shot 2022-06-10 at 6.42.31 PM.png

You mean

  • Header under banner (homepage only)
  • Keep header sticky to top on scroll?
  • Is this right?

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
2 hours ago, tuanphan said:

You mean

  • Header under banner (homepage only)
  • Keep header sticky to top on scroll?
  • Is this right?

Yes. Essentially how I have everything right now just moving the nav header under banner on home page. Id still like the header logo to shrink as they scroll. Thanks!

Link to comment
  • 3 weeks later...
On 6/13/2022 at 8:52 AM, jesswp said:

Yes. Essentially how I have everything right now just moving the nav header under banner on home page. Id still like the header logo to shrink as they scroll. Thanks!

Try adding to Code Injection > Footer

<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>

 

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
  • 2 weeks later...
31 minutes ago, SummerLange said:

Hi! I have the 7.0 version and would like to move my navigation under my fixed header. For some reason it's sitting on top of it. And then I'd like for the header to show up on mobile as well.... here's my site

https://www.summerlangephotography.com/

I also forgot to add that my header is covering my first gallery. How do I fix it to where the gallery isn't cut off?

Link to comment
17 hours ago, SummerLange said:

Hi! I have the 7.0 version and would like to move my navigation under my fixed header. For some reason it's sitting on top of it. And then I'd like for the header to show up on mobile as well.... here's my site

https://www.summerlangephotography.com/

Move nav under header, or move nav under slideshow or move header under slideshow??

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
  • 9 months later...
On 6/30/2022 at 11:46 PM, tuanphan said:

Try adding to Code Injection > Footer

<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>

 

Hi, wanting to do the same thing, but have the code work on the home page and keep the rest of the pages the same.

kopestudio.com

 

 

Edited by KopeStudio
Link to comment
15 hours ago, KopeStudio said:

Yup, done. 

You mean the code doesn't work on Homepage? 

I see it works on other page here

With homepage, find & remove this code from CSS box

body.homepage header#header {
    position: absolute !important;
    background: transparent !important;
}

 

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
9 hours ago, tuanphan said:

You mean the code doesn't work on Homepage? 

I see it works on other page here

With homepage, find & remove this code from CSS box

body.homepage header#header {
    position: absolute !important;
    background: transparent !important;
}

 

Hi, thank you for that! It got it to work on the homepage!

Edited by KopeStudio
Link to comment
  • 3 months later...
13 hours ago, Form said:

Hey! Did you have a way to add a video as the banner instead of an image? Code is working great with a static image! 

With 7.1, just edit section > add video background. Or what is your problem?

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
  • 2 months later...
On 12/24/2020 at 1:29 AM, tuanphan said:

Add this code to Home > Design > Custom CSS. Replace beaverhero with your banner image url.

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/11/work-5382501_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

 

Is it possible to make this have an editable section, where you can add blocks of text, an image or even an email signup form?

I really like this example here: https://havilahcunnington.com/#home but can't figure out how to match this style.

Any help would be appreciated!

Edited by CaleyS
Added an example site
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.