Replacing navigation text titles with thumbnails?

Site URL: https://imnotascientist.com

Hi all, first time here. I'm customizing my design to look like an old Windows 98 theme, using a Squarespace template and customizing everything I can, but this one will require some CSS, and I'm not sure where to put it or what to write. Haven't dabbled with code in years.

Right now, the navigation bar is text-only. I want to add some PNG thumbnails above the text that look like Win 98 desktop thumbnails I made (folders, settings, etc) and have the text for the link go underneath them. I imagine I'll have to make an unlinked page with the thumbnails on it so I can link the images individually (right click, view image). But right now, I can't even figure out where or how to do that, and I'm a little uneasy about possibly breaking the site if I do something wrong. I also want to make sure the menu continues to function on mobile with the icons and text underneath.

Currently experimenting with adding the thumbnails as images in a header area on each page, but that requires doing it one by one to each page, and then they end up stacking vertically on mobile instead of being part of a dropdown menu. And I can't figure out how I'd hide the nav bar if I do it that way.

Also trying to make the navigation go from the top right to centered underneath or left-justified underneath the logo. Can't figure out if that's a custom design setting somewhere, or if that also requires CSS.

Here's screenshots of the current NAV bar with the thumbs as images underneath with the method I'm trying without CSS (removed the icons since this screenshot, so they're not like this on the current site). If the CSS is a bit of a problem. Site is imnotascientist.com and pass is: missingno

20 hours ago, imnotascientist said:

Site URL: https://imnotascientist.com

Hi all, first time here. I'm customizing my design to look like an old Windows 98 theme, using a Squarespace template and customizing everything I can, but this one will require some CSS, and I'm not sure where to put it or what to write. Haven't dabbled with code in years.

Right now, the navigation bar is text-only. I want to add some PNG thumbnails above the text that look like Win 98 desktop thumbnails I made (folders, settings, etc) and have the text for the link go underneath them. I imagine I'll have to make an unlinked page with the thumbnails on it so I can link the images individually (right click, view image). But right now, I can't even figure out where or how to do that, and I'm a little uneasy about possibly breaking the site if I do something wrong. I also want to make sure the menu continues to function on mobile with the icons and text underneath.

Currently experimenting with adding the thumbnails as images in a header area on each page, but that requires doing it one by one to each page, and then they end up stacking vertically on mobile instead of being part of a dropdown menu. And I can't figure out how I'd hide the nav bar if I do it that way.

Also trying to make the navigation go from the top right to centered underneath or left-justified underneath the logo. Can't figure out if that's a custom design setting somewhere, or if that also requires CSS.

Here's screenshots of the current NAV bar with the thumbs as images underneath with the method I'm trying without CSS (removed the icons since this screenshot, so they're not like this on the current site). If the CSS is a bit of a problem. Site is imnotascientist.com and pass is: missingno

Add to Design > Custom CSS

nav.main-nav>ul>li a:before {
    content: "";
    background-size: contain;
    display: block;
    width: 50px;
    height: 50px;
    background-position: center center;
    text-align: center;
    margin: 0 auto;
}
nav.main-nav>ul>li:first-child a:before {
    background-image: url(https://cdn.pixabay.com/photo/2018/08/24/18/28/background-3628553__340.jpg);
}
nav.main-nav>ul>li:nth-child(2) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2021/05/27/14/40/anemone-6288318__340.jpg);
}
nav.main-nav>ul>li:nth-child(3) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2018/06/14/21/11/girl-3475649__340.jpg);
}

@tuanphanIt worked! Thanks so much 🙂 Looks great on desktop and mobile

On 6/8/2021 at 7:29 PM, imnotascientist said:

@tuanphanIt worked! Thanks so much 🙂 Looks great on desktop and mobile

Do you need support on these?

Site URL – https://imnotascientist.com/

1. (Mobile-Footer) Remove space between footer-bottom of screen?

2. (Mobile-Footer) Align social icons-left text?

On 6/13/2021 at 5:19 AM, tuanphan said:

Do you need support on these?

Site URL – https://imnotascientist.com/

1. (Mobile-Footer) Remove space between footer-bottom of screen?

2. (Mobile-Footer) Align social icons-left text?

Hi there,

Right now, the thumbnails are perfect and the social icons are not a problem. The only issue left is on my other post regarding the footer, I'm having issues getting the footer to appear on all pages automatically, and there's a gap at the bottom when viewing on mobile

Here's the link to that thread

The current image is on homepage, so it will appear on homepage only.

To make it appear on entire site, you need add an image block on footer, then we will adjust code to make it fixed at bottom of screen