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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

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