Jump to content

Custom Menu

Go to solution Solved by Beyondspace,

Recommended Posts

I need help on customizing a menu. I'm completely new to coding for website design so bare with me. I want to customize the menu of my website to have a background that I created. I don't want the default solid color, I want to be able to put my own created menu from adobe illustrator. How would I go about doing this?

right now I have an idea of what i want on there but i want the brick background to stay behind the menu and in the footer, and i want the logo portion that's under it to be its own picture. I also want everything to update in size when the window is shrunk.

website: sphere-sunfish-5hfj.squarespace.com

password: yoloyoli123

Edited by yoloyoli123
added more info
Link to comment
7 hours ago, yoloyoli123 said:

I need help on customizing a menu. I'm completely new to coding for website design so bare with me. I want to customize the menu of my website to have a background that I created. I don't want the default solid color, I want to be able to put my own created menu from adobe illustrator. How would I go about doing this?

What is your site url to help us check?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
11 hours ago, yoloyoli123 said:

I need help on customizing a menu. I'm completely new to coding for website design so bare with me. I want to customize the menu of my website to have a background that I created. I don't want the default solid color, I want to be able to put my own created menu from adobe illustrator. How would I go about doing this?

Hey @yoloyoli123 please provide Your site URL. 

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment

Do you mean changing background color of the header and the footer?

image.thumb.png.7e426695cbb912f35977d721f8a3735e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution
On 11/20/2021 at 10:45 PM, yoloyoli123 said:

yes I want it to be that brick pattern

You can try adding to Home > Design > Custom Css

#header.shrink .header-border, #header .header-border {
  background: url(https://images.unsplash.com/photo-1637358650228-76cb3810b46e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
}
footer .section-background {
    background: url(https://images.unsplash.com/photo-1637358650228-76cb3810b46e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
}

footer * {
  color: #fff;
}

Change the url with your photo/color you want to apply

Let me know how it works on your site.

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36
Update for not shrink header

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing result

image.thumb.png.b3fa707a0b35219bdb5337296abba116.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, yoloyoli123 said:

it works awesome, but the header when sitting at the top does not show the background. how could i get it to not disappear?

I've just update my previous snippet, kind check if it works properly on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 11/23/2021 at 5:35 PM, bangank36 said:

I've just update my previous snippet, kind check if it works properly on your site

works awesome! thanks so much. do you know if there's a way to take out the home button in the menu? I only want the home page to be accessible through pressing the logo on the left hand side

Link to comment
2 hours ago, yoloyoli123 said:

works awesome! thanks so much. do you know if there's a way to take out the home button in the menu? I only want the home page to be accessible through pressing the logo on the left hand side

Have you tried dragging your Home Page to Not Link in Home > Pages yet?

 Hope it can help you

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...

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.