Custom Header

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!

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!

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

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?

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

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 version

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 version

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?

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?

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