Jump to content

Recommended Posts

Site URL: https://www.triquetraconstruction.co.uk/home

Hi guys, 

I am trying to customise my header to look like the attached image, with the green backgrounds behind each navigation button and with the social icons & safecontractor logo in that position.

Is there a code i can use to make the buttons have that background? 

And can an image block & social icon block be added to the header (without using the social icon element in header)

Thanks!

Capture.JPG

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, aimzee97 said:

Site URL: https://www.triquetraconstruction.co.uk/home

Hi guys, 

I am trying to customise my header to look like the attached image, with the green backgrounds behind each navigation button and with the social icons & safecontractor logo in that position.

Is there a code i can use to make the buttons have that background? 

And can an image block & social icon block be added to the header (without using the social icon element in header)

Thanks!

Capture.JPG

1. We can hide the standard header and create a first section on all page with this layout.

-> Creating one page then duplicate it into new page. But it could be hard in case that you need to change the layout of header,  you must to change the layout on all pages

2. Another approach that you can consider is:

- Creating a special page to add your custom header section.

- using javascript to render the custom header section to all your page.

With this solution, when you change the design of custom header section, it will change on all pages

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
22 hours ago, bangank36 said:

1. We can hide the standard header and create a first section on all page with this layout.

-> Creating one page then duplicate it into new page. But it could be hard in case that you need to change the layout of header,  you must to change the layout on all pages

2. Another approach that you can consider is:

- Creating a special page to add your custom header section.

- using javascript to render the custom header section to all your page.

With this solution, when you change the design of custom header section, it will change on all pages

Thank you, I already have done the first option across the site but am unable to make a the button blocks into drop down menus that work across both the desktop and mobile. I managed to make one from  code block in the desktop version that looked great, but you could amend the size of it to fit right on the mobile version.

Do you know a way in which i can make a button block into a dropdown?

Link to comment
2 hours ago, aimzee97 said:

Thank you, I already have done the first option across the site but am unable to make a the button blocks into drop down menus that work across both the desktop and mobile. I managed to make one from  code block in the desktop version that looked great, but you could amend the size of it to fit right on the mobile version.

Do you know a way in which i can make a button block into a dropdown?

You can try using the code block and apply the following tutorial: https://www.w3schools.com/howto/howto_css_dropdown.asp

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
23 hours ago, bangank36 said:

You can try using the code block and apply the following tutorial: https://www.w3schools.com/howto/howto_css_dropdown.asp

Thank you - this works to make a drop down, but what code can i use to make the button the same size as the code block itself? I have made the code block the same size as the other buttons, but changing the padding makes it the same on desktop, but massive on the mobile versionimage.thumb.png.c1ebba5bcb8b75857fc655a4ee629c0b.pngimage.png.d5f69617ce250a6429878cb30fbf6e13.png

Link to comment
6 minutes ago, aimzee97 said:

Thank you - this works to make a drop down, but what code can i use to make the button the same size as the code block itself? I have made the code block the same size as the other buttons, but changing the padding makes it the same on desktop, but massive on the mobile versionimage.thumb.png.c1ebba5bcb8b75857fc655a4ee629c0b.pngimage.png.d5f69617ce250a6429878cb30fbf6e13.png

I have changed the padding and this is how it looks on mobile. Is there any way to make the writing on one line as well instead of on two?

image.png.8f965edf1abeec423dc66708496ab7b8.png

Link to comment
On 9/15/2022 at 9:01 PM, aimzee97 said:

I have changed the padding and this is how it looks on mobile. Is there any way to make the writing on one line as well instead of on two?

image.png.8f965edf1abeec423dc66708496ab7b8.png

It looks like you solved this? It shows one line to me

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

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

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.