Jump to content

Sidebar background color for Wells template (responsive)

Recommended Posts

Site URL: http://walrus-crow-g8y9.squarespace.com

Hello,

First off, the password for my site (since I'm still on the trial version) is: password1

I'm a little rusty on CSS, and I've had very minor success at trying to get what I want so far - basically, I just want the background color of the sidebar/header to be black, while the text will mainly be white. I've got something close to this already (though I haven't found the tags to make the text white yet), however it's not responsive when I switch to mobile display! I've tried fixing it by piecing together some CSS that I found, but the padding leaves whitespace on the top and on the left. How can I accomplish this without having the whitespace?

I made two quick mock-up images that show what I'm trying to accomplish - how can I get to there with what I have now? Also, would love to know how to make the hamburger icon for the mobile version instead of it saying "menu".

Thank you so much for any help you can give!

iPhone X-XS-11 Pro – 1.png

Web 1920 – 1.png

Link to comment
  • Replies 2
  • Views 757
  • Created
  • Last Reply

Thank you so much, creedon! That's a huge help!

I'm getting very close to figuring it out, but I since I've decided to add social media icons I've run into a larger problem: how can I get them to shrink and center for mobile? I'd love to have them on the same line as the logo (which I would love to have change to just the icon version in mobile) and hamburger icon but in the center - so logo, social icons, hamburger. However, if I can just have them centered then I would gladly take that instead haha!

Link to comment

Archived

This topic is now archived and is closed to further replies.

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