Add banner above menu

Hi

We are asked to create a Squarespace website and the client wants a banner ABOVE the menu, like here: https://www.brugge.be

So they want to add a white banner with their logo above the menu. We cannot find a template that offers this so I guess we need to add this with custom code.

Any suggestions for the best solution? 

6 minutes ago, Katrien said:

Hi

We are asked to create a Squarespace website and the client wants a banner ABOVE the menu, like here: https://www.brugge.be

So they want to add a white banner with their logo above the menu. We cannot find a template that offers this so I guess we need to add this with custom code.

Any suggestions for the best solution? 

Which banner? Can you take screenshot

I see logo, login account..

@tuanphan the red menu shouldn't be a problem but they want above the menu a white 'banner' with the logo of the city. 

Thank you!

2 minutes ago, Katrien said:

@tuanphan the red menu shouldn't be a problem but they want above the menu a white 'banner' with the logo of the city. 

Thank you!

If SS can't do it, you can insert HTML code to Footer Code Injection

@tuanphanyes, I already thought HTML code in the Code Injection would be necessary. But how does that code look like? I am not a developer.

11 hours ago, Katrien said:

@tuanphanyes, I already thought HTML code in the Code Injection would be necessary. But how does that code look like? I am not a developer.

<div class="banner">
  <a href="https://yourwebsite.com" target="_self">
     <img src="logo url" alt="logo" width="200" height="200"/>
  </a>
</div>
  

then use CSS to push it to op

.banner {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:999;
}

Next, continue to use CSS to fix overlap between Banner & Menu.

.enter-menu-class-name {
position: absolute;
top: 10px; // replace 10px with banner height
left: 0;
right: 0;
z-index: 999;
}

A simpler way is to design an image with a logo, then use CSS before to insert it above the Menu. Use the following CSS

.enter-menu-class-name:before {
background-image: url("enter banner image url here");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

Hi

Thank you. I have tried option 1 but nothing changes. So I must be doing something wrong.
Where do I place the first part of te code? I have changed the website url and have found the url of the image. 

<div class="banner"> <a href="https://yourwebsite.com" target="_self"> <img src="logo url" alt="logo" width="200" height="200"/> </a> </div>

----

If I follow option 2 and only paste this in CSS and the correct link to the image it also doesn't change the layout of the website. 
 

.enter-menu-class-name:before {
background-image: url("enter banner image url here");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

I have removed the dots in front of the first line, but that also doesn't help.

Thank you in advance for your answer and help.

15 hours ago, Katrien said:

Hi

Thank you. I have tried option 1 but nothing changes. So I must be doing something wrong.
Where do I place the first part of te code? I have changed the website url and have found the url of the image. 

<div class="banner"> <a href="https://yourwebsite.com" target="_self"> <img src="logo url" alt="logo" width="200" height="200"/> </a> </div>

 

I have removed the dots in front of the first line, but that also doesn't help.

Thank you in advance for your answer and help.

Each site uses different

.enter-menu-class-name

This is just example class name. If you don't share url, we can't give exactly menu-class-name