Jump to content

Move navigation buttons above gallery carousel

Recommended Posts

Posted (edited)

Hi all,

I'm trying to move the navigation buttons on a gallery carousel to above the images, and not below or centered , as is the standard Squarespace options. I can change the colour, icons, size of the buttons using CSS , but need some assistance to place the buttons side by side right aligned, and above the images.

Site is: https://orb-robin-wn9f.squarespace.com/

Password: 1ndigo

Example of what I'm trying to achieve is below...

image.thumb.png.b4f3c26ba14b5fdeb1a33c02c92aef43.png

 

 

Edited by CJoose
Link to comment

If you set them to below you can use CSS to change the order of the elements to place the arrows at the top instead.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

Link to comment

The elements are in a flex grid, so using flex-direction: column-reverse; will be the CSS property you need. If you change the setup on your website I can provide the full code.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

Link to comment

Great ! I've change the first image carousel so the navigation buttons are now at the bottom and right aligned, if you can let me know the CSS I need to change?

I'm happy with the testimonials slider having the buttons centered, but I guess the same logic will apply 

Thanks

Link to comment

Add this to Custom CSS:

.user-items-list-item-container {
  display: flex;
  flex-direction: column-reverse;
}

 

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

Link to comment
4 hours ago, CJoose said:

Thanks, that has worked and moved them to the top, above the images. How do i put some padding underneath them to move them up from the images ? Can you get the buttons to align with the title text of the carosuel ? Sorry to be a pain ...

image.thumb.png.e6b647e669b1f23692a8ddeede3a442d.png

 

 

 

Link to comment

I've worked out to create a gap between the buttons and images by using:

.arrows-bottom { margin-top: 40px;}

but, that is still not aligning with the title text, any ideas on that one ? Thx 

image.thumb.png.496c33c8b321d649714d4a6d85110c9c.png

Link to comment

Potentially, but the title and arrows are in a different elements so will be difficult to align accurately and consistently.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

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

 Did I help? Buy me a coffee?

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.