Jump to content

Adjust height of Services section and add unique button to menu bar/header

Recommended Posts

Hi,

1. I'm looking for some CSS that will reduce the section height of the Our Services section on our homepage as it isn't editable from what I can see. If I could also use this code for other sections separately (such as the gallery below the Our Services section) so that I have some flexibility going forward then that would be fab.

2. I'd also like to add a unique button to the menu bar/header that links to a custom URL (screenshot attached for reference). The style would be the same as the other buttons on our homepage ('Book a call' and 'Find out more'). Is it possible to do this on desktop and in the mobile burger menu?

Thanks in advance!

Website URL: https://www.bon-creative.co.uk/home

Unique header button with link.png

Edited by EllMorrow
Added URL
Link to comment

Can you share your website URL?

(this advice assumes you are in SQS 7.1)

1) You should be able to do this without CSS, in the section settings you can adjust the height between S, M, and L, or by using the slider to select a VH number, or by setting it to fill screen (if on Fluid Engine)

2) In the header settings (available when editing any page) you can add a button, if you want it to the left of the social icons, that can be achieved with CSS, I can provide the code after you've enabled the button and shared the URL.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
13 hours ago, Ziggy said:

Can you share your website URL?

(this advice assumes you are in SQS 7.1)

1) You should be able to do this without CSS, in the section settings you can adjust the height between S, M, and L, or by using the slider to select a VH number, or by setting it to fill screen (if on Fluid Engine)

2) In the header settings (available when editing any page) you can add a button, if you want it to the left of the social icons, that can be achieved with CSS, I can provide the code after you've enabled the button and shared the URL.

Thanks Ziggy, URL is in the post now! I added it originally to the Site URL box but for some reason it wasn't saving.

1) Found the section height VH sliders, thank you! Didn't realise it was in the Edit Content menus rather than Edit Design.

2) I've enabled the button

Link to comment

Add this to Custom CSS to switch the button and social icons order:

.header-actions--right {
    justify-content: flex-start;
    flex-direction: row-reverse;
}

Hope that helps!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
3 hours ago, Ziggy said:

Add this to Custom CSS to switch the button and social icons order:

.header-actions--right {
    justify-content: flex-start;
    flex-direction: row-reverse;
}

Hope that helps!

It did, thank you!

Is there any way to do the same switch on the mobile burger menu? So that the button is above the social icons? Screenshot attached for reference

Screenshot 2023-01-04 at 11.43.54.png

Link to comment

Slightly trickier, but this should do it!

.header-menu-nav-folder-content {
  order:1;
}
.header-menu-actions {
  order:3;
}
.header-menu-cta {
  order:2;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

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.