Jump to content

Adding a horizontal line and extra logo to the site header

Recommended Posts

Hi

I am starting a new website and I want to add a horizontal line across the top of the header - not a border, the line should be around 5% from the top, and above it I want to include a logo icon and language options, as I plan to make the site bi-lingual. On a separate note, I wonder if it's possible to have an image in the block beneath overlap the header on some pages? I have attached a photo of what I'm looking to create:

Many thanks in advance!

 

Screenshot2024-02-20at10_07_48.png.41e7fd9d1b8c6e2be82c68cd9c390736.png

Link to comment
  • Replies 12
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

On 2/29/2024 at 7:26 PM, Lex-Elin said:

Hi, I followed the instructions here and sent an email with the share password - did you get it? Thanks!

I'm not sure, received a lot of message recently. If you haven't still respond from me, you can send again, or paste password here

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/2/2024 at 9:24 AM, tuanphan said:

I'm not sure, received a lot of message recently. If you haven't still respond from me, you can send again, or paste password here

Password is: Llxk45Hu791

Link to comment

Try this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.header-display-desktop .header-actions.header-actions--right').insertBefore('.header-display-desktop');
    $('<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>').insertBefore('div#multilingual-language-picker-desktop');
});
</script>
<style>
  @media screen and (min-width:992px) {
  .header-actions.header-actions--right {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 1 100% !important;
    border-bottom: 1px solid #fff !important;
    justify-content: flex-start;
}
.header-inner {
    flex-direction: column;
}

.header-title-nav-wrapper {
    margin: 0 auto;
}
    .header-actions.header-actions--right>img {
    width: 50px;
}
  }
</style>

image.thumb.png.dd7f5796f4dcd426090ceb08dd6bb8fc.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks for that! It's great, but, I don't want to use the google plug-in.I signed up for Weglot through the Squarespace trial... I need to link in that service - and hopefully that won't include featuring a logo that isn't ours.

Link to comment
  • 2 months later...

Hi @tuanphan,

I tried to apply your code independently but failed:
https://okra-heron-ks3m.squarespace.com
pass: pptest

I've attached the image showing what I want to create (no need to worry about the colours): red bar without margin, with social icons on the right, with the extra extra logo (PP_LOGO_s_P%26P_logo_standard.png) that is now hanging in the air, in the red bar after the social icons. 

Can you help me with this, please!

Thank you, 
Anita

Screenshot 2024-06-12 at 11.21.52.png

Link to comment
On 6/12/2024 at 4:46 PM, antasz said:

Hi @tuanphan,

I tried to apply your code independently but failed:
https://okra-heron-ks3m.squarespace.com
pass: pptest

I've attached the image showing what I want to create (no need to worry about the colours): red bar without margin, with social icons on the right, with the extra extra logo (PP_LOGO_s_P%26P_logo_standard.png) that is now hanging in the air, in the red bar after the social icons. 

Can you help me with this, please!

Thank you, 
Anita

Screenshot 2024-06-12 at 11.21.52.png

You can follow this.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.