Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 Mobile Navigation with images to replace text


studio_slp

Question

Posted (edited)
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 post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

6 answers to this question

Recommended Posts

  • 0

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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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 post
  • 0
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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...