Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
Katrien

Add banner above menu

Recommended Posts

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? 

Share this post


Link to post
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..


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL | 120+ SS 7.1 code

 

Share this post


Link to post
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!

Screenshot 2019-12-21 13.32.19.png

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


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL | 120+ SS 7.1 code

 

Share this post


Link to post
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;
}

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL | 120+ SS 7.1 code

 

Share this post


Link to post

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.

Share this post


Link to post
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

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL | 120+ SS 7.1 code

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...