Jump to content

7.1 Mobile Navigation with images to replace text

Recommended Posts

Hello SS community !
 
 
I am looking to create a navigation using images, versus text.
 
Does anyone have any experience with this, or know how I would go about solving this?
 
1. I use Squarespace 7.1
 
2. I would like to create a NAV using images, instead of text.
 
3. On mobile, I would like the hamburger and X to be a custom image(s) as well. 
 
4. On mobile, when the nav is selected, I would like the option to view, or not view (hide) the site logo when navigation links are viewable. Is this possible?
 
Can you please help advise on how would I go about creating this sort of navigation in Squarespace 7.1?
 
Please let me know if you have any questions?
 
Thanks so much for your help and support!
Nic

FB637123-6B89-4F61-89F0-F220DA7A05A1.png

Edited by studio_slp
Link to comment

With nav images, add this code to Home > Design > Custom CSS

/* About */
.header-announcement-bar-wrapper [href="/about"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}
/* Art - Design */
.header-announcement-bar-wrapper [href="/art"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/burger-731298_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

Repeat for other items. Replace href=".." with page url.

With Hamburger custom icon, add to Home > Design > Custom CSS

.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://static.thenounproject.com/png/3143942-42.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 7/8/2020 at 5:23 AM, tuanphan said:

With nav images, add this code to Home > Design > Custom CSS


/* About */
.header-announcement-bar-wrapper [href="/about"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}
/* Art - Design */
.header-announcement-bar-wrapper [href="/art"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/burger-731298_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

Repeat for other items. Replace href=".." with page url.

With Hamburger custom icon, add to Home > Design > Custom CSS


.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://static.thenounproject.com/png/3143942-42.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

Will this same methodology apply to SS 7.0 with the Brine family (Impact Template)?

Link to comment
On 7/14/2020 at 6:29 AM, stinkingcedar said:

Will this same methodology apply to SS 7.0 with the Brine family (Impact Template)?

Yes, However SS 7.0 uses different class. If you share link to your site, I can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 8 months later...
18 hours ago, sharine said:

@tuanphan, this is was so helpful. Thank you! Is there any way to make the images appear larger in navigation?

You can increase navigation text size

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 7/8/2020 at 2:23 AM, tuanphan said:

With nav images, add this code to Home > Design > Custom CSS


/* About */
.header-announcement-bar-wrapper [href="/about"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}
/* Art - Design */
.header-announcement-bar-wrapper [href="/art"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/burger-731298_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

Repeat for other items. Replace href=".." with page url.

With Hamburger custom icon, add to Home > Design > Custom CSS


.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://static.thenounproject.com/png/3143942-42.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

Hi! Thank you so much for this -- it's been so helpful -- could you tell me how I might modify the code to do this to a folder? I've succeeded at replacing all my menu buttons with an image except the one that is a folder--thanks! 

Link to comment
23 hours ago, scenedesign said:

Additionally, is there a a way to bake the determining of size parameters into this code snippet? I'm finding doing it via the navigation site styles causes my images to either be to small or fall in really weird places on the nav bar. Thanks in advance!! 

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 6/16/2021 at 10:30 PM, tuanphan said:

Can you share site url? We can check easier

Hi! So sorry, it's currently private. I did figure out the aforementioned issue, but am now noticing that each link disappears when clicked on (so, if you click on "about," the word "about" disappears on the menu bar). Using 7.1. Do you know what could be causing this? 

Link to comment
On 6/19/2021 at 3:32 AM, scenedesign said:

Hi! So sorry, it's currently private. I did figure out the aforementioned issue, but am now noticing that each link disappears when clicked on (so, if you click on "about," the word "about" disappears on the menu bar). Using 7.1. Do you know what could be causing this? 

You can setup password & share url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 6/27/2021 at 6:04 AM, scenedesign said:

Hi! Yep! Shooting you an email - thank you!

Hi. Have you solved it yet? If not, can you send it again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
On 7/8/2020 at 11:23 AM, tuanphan said:

With nav images, add this code to Home > Design > Custom CSS

/* About */
.header-announcement-bar-wrapper [href="/about"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}
/* Art - Design */
.header-announcement-bar-wrapper [href="/art"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/burger-731298_640-min.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

Repeat for other items. Replace href=".." with page url.

With Hamburger custom icon, add to Home > Design > Custom CSS

.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://static.thenounproject.com/png/3143942-42.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

 

thanks for this! wanted custom images on my navigation bar and found this thread! 

There's just one issue though: once I click on the link, the image disappears.

Here's my website for reference:

https://www.27cloud7.com (please be kind, I'm still building it :P)

 

Edited by 27CLOUD7
Additional Information
Link to comment

Yes, the following css worked for me:

/* Work */
.header-announcement-bar-wrapper [href="/work"], .header-menu--folder-list .header-menu-nav-item [href="/work"]{
    background-image: url(https://yourimagelink.png)!important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: transparent !important;
}

Do the same for each link/image.

Hope it helps!

Link to comment
3 hours ago, IsaWP said:

Yes, the following css worked for me:

/* Work */
.header-announcement-bar-wrapper [href="/work"], .header-menu--folder-list .header-menu-nav-item [href="/work"]{
    background-image: url(https://yourimagelink.png)!important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: transparent !important;
}

Do the same for each link/image.

Hope it helps!

Yup it did! Thanks a lot 🙂

Link to comment
  • 6 months later...

Okay, so I got this to work, but I needed the image to render smaller than it was loading. I managed to get it smaller on desktop, but now it is out of line in mobile! 

This is the code I used

 

/* Burger */
.header-announcement-bar-wrapper [href="/burger"], .header-menu--folder-list .header-menu-nav-item [href="/burger"]{
  height: 32px;
  width: 20px;
  background-image: url(https://static1.squarespace.com/static/6126e75fd94a5022e15cc34a/t/62b2249c3b64af02534957c8/1655841948620/OHM+Burger+2.pnghttps://static1.squarespace.com/static/6126e75fd94a5022e15cc34a/t/62b223486887c3517510ab82/1655841608309/OHMBurger.pnghttps://yourimagelink.png)!important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: transparent !important;
}

 

I've attached screenshoots of how it is currently rendering. 

Screen Shot 2022-06-21 at 3.18.17 PM.png

Screen Shot 2022-06-21 at 3.18.05 PM.png

Link to comment
12 hours ago, KelsieLauck said:

Okay, so I got this to work, but I needed the image to render smaller than it was loading. I managed to get it smaller on desktop, but now it is out of line in mobile! 

This is the code I used

 

/* Burger */
.header-announcement-bar-wrapper [href="/burger"], .header-menu--folder-list .header-menu-nav-item [href="/burger"]{
  height: 32px;
  width: 20px;
  background-image: url(https://static1.squarespace.com/static/6126e75fd94a5022e15cc34a/t/62b2249c3b64af02534957c8/1655841948620/OHM+Burger+2.pnghttps://static1.squarespace.com/static/6126e75fd94a5022e15cc34a/t/62b223486887c3517510ab82/1655841608309/OHMBurger.pnghttps://yourimagelink.png)!important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: transparent !important;
}

 

I've attached screenshoots of how it is currently rendering. 

Screen Shot 2022-06-21 at 3.18.17 PM.png

Screen Shot 2022-06-21 at 3.18.05 PM.png

What is your site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.