How to add a single banner image above my navigation menu?

Hi everyone,

Does anyone know how could I add a single banner image above my navigation menu?
From now, my banner image is under my navigation menu (see pic attached).

Thanks a lot in advance. 😀

Nadège

Try this solution:

Hey Ziggy!

Thanks a lot it works, I just got a huge space write know

How could I rectify it?

Thanks a lot!

N.

2 hours ago, PoupeeFlash said:

Thanks a lot it works, I just got a huge space write know

 

Set the section height to L (large)

Hello !

As you can see i don't have this option from my side :

And also, I need this banner to appear in each page of my website, how could i do that?

Thanks a lot!

Nadège

Thanks a lot!

Now it works! 😀

1 minute ago, PoupeeFlash said:

Now it works! 😀

Nice one! Thanks for marking my post as the solution!

Hey there, 

Back to you cause I want to delete this banner only on mobile device.

I used this code : 

@media screen and (max-width: 640px) {

.page-section:first-child {
visibility: hidden;
}

}

But there is an big empty white space instead of the banner (see screenshot). How could I delete it?

Thanks a lot!

N.

visibility:hidden; just means that the section has no visibility, so shows as blank, if you don't want something to load, then you need to use display:none; You also may want to use 767px instead of 640px as that's the correct mobile breakpoint for Squarespace 7.1

Alright ! 

I taped this : 

@media screen and (max-width: 767px) {
.page-section:first-child {
display:none;
}
}

But now, my menu disappeared (see screenshot). Thanks a lot for your help ! N.

Can you share your website URL?

yes : 

Private link : https://www.maisonteryel.com/

Password : gp/U02w?@7BIw1

Thanks!

Try this CSS:

@media screen and (max-width: 767px) {
  .page-section:first-child {
    display:none;
  }
  .page-section:second-child {
    margin-top: 90px;
  }
  .header .header-announcement-bar-wrapper .header-border {
    z-index: 99 !important;
  }
}

Hey, 

Same result than my last screenshot.

The mobile menu is still hidden.

Thanks. N.

Try this instead:

@media screen and (max-width: 767px) {
  .page-section:first-child {
    display:none;
  }
  .page-section:nth-child(2) {
    margin-top: 90px;
  }
  .header .header-announcement-bar-wrapper .header-border {
    z-index: 99 !important;
  }
}

Unfortunately it's stil the same thing :The mobile menu is still hidden. 😞

2 minutes ago, PoupeeFlash said:

Unfortunately it's stil the same thing :The mobile menu is still hidden. 😞

Strange, it works on my test site. Try adding an !important to the margin top:

@media screen and (max-width: 767px) {
  .page-section:first-child {
    display:none;
  }
  .page-section:nth-child(2) {
    margin-top: 90px !important;
  }
}

Ah i don't why it's still not working from my side…

8 minutes ago, PoupeeFlash said:

Ah i don't why it's still not working from my side…

Sorry, I can't understand why that's not working. Any errors in your CSS?

Yeah that's weird…

This all that i got in my code injection :

<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;
  background: white !important;
  margin-bottom: 2em;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(0vh - 93px)!important;
}
}

@media screen and (max-width: 767px) {
  .page-section:first-child {
    display:none;
  }
  .page-section:nth-child(2) {
    margin-top: 90px !important;
  }
}
  
</style>

This is all that i got in my CSS :

@font-face {
font-family: Bookman Old Style;
src: url(https://static1.squarespace.com/static/6526914f318a803a3c6b52f8/t/652fa8d68c27354c6741db24/1697622231225/Bookman+Old+Style+Regular.ttf);
}

@font-face {
font-family: modestoopen-inlinefill;
src: url(https://static1.squarespace.com/static/6526914f318a803a3c6b52f8/t/652fa54b40e37169cae7f169/1697621323634/modestoopen-inlinefill.ttf);
}

p {
font-family: 'Bookman Old Style';
}

// Site Navigation //
.header-nav-item a {
  font-family: 'modestoopen-inlinefill' !important;
  font-weight: 600;
  text-transform: uppercase;
}

.thumbnail-image { 
   width: 200px; 
   height: 200px; 
}

.header-title { 
  visibility: hidden; 
}

Looks like it's not working correctly because it's in the header code injection. Also looks like you have some conflicting code for the #header.

Hey, 

I finally find a way to fix it. 🙂

But now, only on mobile device, all those nav links (see screenshots) don't work. I don't understand why cause it's only happening on mobile device. Could you help me with that. 

Thanks.

N.

On 1/12/2024 at 6:15 PM, PoupeeFlash said:

Hey, 

I finally find a way to fix it. 🙂

But now, only on mobile device, all those nav links (see screenshots) don't work. I don't understand why cause it's only happening on mobile device. Could you help me with that. 

Thanks.

N.

 

It shows fine to me on mobile

Hey @tuanphan, 

Actually, all the links from the NOTRE CATALOGUE folder nav are broken…and only on mobile device. 😞