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

Add banner above menu


Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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