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

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

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.

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

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!

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

Slightly trickier, but this should do it!

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