How to replace Navigation text with an Image

Site URL: https://www.anybodysautos.net

I want to set up a new page on my website called "Freeze Peach" but instead of just typing it into the Navigation bar like usual, I'd like to use a .png of the logo that my friend is designing. They don't have the logo designed yet, so I just created the page as "Coming Soon!" for now.

I tried uploading a file in Custom CSS to see if that would work, but sadly it didn't. And I'm not very experienced in css.

Let me know if there's another way!

Thanks

7 hours ago, HansenCreations said:

Site URL: https://www.anybodysautos.net

I want to set up a new page on my website called "Freeze Peach" but instead of just typing it into the Navigation bar like usual, I'd like to use a .png of the logo that my friend is designing. They don't have the logo designed yet, so I just created the page as "Coming Soon!" for now.

I tried uploading a file in Custom CSS to see if that would work, but sadly it didn't. And I'm not very experienced in css.

Let me know if there's another way!

Thanks

I think you still need to add the page to nav bar and restyle the nav item with css, could I check the image you got?

Right! I've added the page to the nav bar and now need a little guidance on restyling. 😅

And the image is attached below. 

Awesome! That worked. Thank you @bangank36

On 11/17/2020 at 7:19 PM, bangank36 said:

.Header-nav-item[href*=coming-soon],
.Mobile-overlay-nav-item[href*=coming-soon] {
  position: relative;
  color: transparent !important;
}
.Header-nav-item[href*=coming-soon]:after,
.Mobile-overlay-nav-item[href*=coming-soon]:after {
    content: '';
    background: url(https://content.invisioncic.com/p289038/monthly_2020_11/FreezePeach-ComingSoon.png.ce50920572f09ddd418a10fcdc065c88.png) no-repeat;
    background-size: cover;
    position: absolute;    
    width: 200px;
    height: 120%;    
}
.Mobile-overlay-nav-item[href*=coming-soon]:after {
    left: -10%;
}
.Header-nav-item[href*=coming-soon]:after {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

I'm trying to do the same thing on a page I'm working on, and I'm not getting the desired effect.  if someone could take a look and let me know what I'm doing wrong, I would greatly appreciate it!

www.dreammarketinggroup.com.  Trying to get the 'DREAMVS' navigation link to display a logo.

Thanks in advance

On 4/7/2022 at 9:07 AM, adc said:

I'm trying to do the same thing on a page I'm working on, and I'm not getting the desired effect.  if someone could take a look and let me know what I'm doing wrong, I would greatly appreciate it!

www.dreammarketinggroup.com.  Trying to get the 'DREAMVS' navigation link to display a logo.

Thanks in advance

Add to Design > Custom CSS

div.header-nav-item [href="/dreamvs"] {content: '';
    background: url(https://content.invisioncic.com/p289038/monthly_2020_11/FreezePeach-ComingSoon.png.ce50920572f09ddd418a10fcdc065c88.png) no-repeat;
    background-size: cover;
    height: 100%;
    color: transparent !important;
    background-position: center center;
}

On 4/10/2022 at 9:00 AM, tuanphan said:

Add to Design > Custom CSS

div.header-nav-item [href="/dreamvs"] {content: '';
    background: url(https://content.invisioncic.com/p289038/monthly_2020_11/FreezePeach-ComingSoon.png.ce50920572f09ddd418a10fcdc065c88.png) no-repeat;
    background-size: cover;
    height: 100%;
    color: transparent !important;
    background-position: center center;
}

 

Can you help me as well? I'd like to change the FOR FUN navigation link of this site to this logo here. And f I want it to be a vector svg instead of a png, can I just swap it out after? Thank you!

On 4/13/2022 at 3:25 AM, SSong said:

Can you help me as well? I'd like to change the FOR FUN navigation link of this site to this logo here. And f I want it to be a vector svg instead of a png, can I just swap it out after? Thank you!

Add this CSS

a.Header-nav-item[href*="forfunfoods"] {
    background-image: url(https://static1.squarespace.com/static/5c5aed7b840b160c0a36ad9a/t/6255df2b4ea0b25916fa73dc/1649794859649/FF_Logotype_Web.png);
    color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

If you want to change to svg, just replace url in the code with svg file url