Jump to content

I'd like to have an image/shape as my navigation bar

Go to solution Solved by Lesum,

Recommended Posts

Is it possible to us an image or vector file as a side bar/navigation.

Currently I use the Wexley template but feel my page needs a colour boost. 

I've attached a before and (rough) after image of what I have in mind - I know I'd then need to change text lighter but that's chill

Any help would be groovy :)

IMG_0128.jpg

IMG_0128.png

SHAPE.png

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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

@MoeshaK You can use this code snippet to add an background image on the side bar. Add this code under Website > Pages > Website Tools > Custom CSS.

@media screen and (min-width: 801px) {
	body.sidebar-position-left #headerWrapper {
		height: 100vh !important;
		background-image: url('replace-with-your-image-url');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		left: 0 !important;
		top: 0 !important;
		padding: 20px;
	}
	#logo .logo.image img {
		max-width: 190px !important;
	}
}

Replace the background-image url in the code with your image url.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? 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.