Add a logo and clickable text over moving images

Site URL: https://www.nordincatic.com/

I'd like to be able to have my homepage have a slideshow of images and instead of the logo and navigation links to be in the header, I'd like them to be in the middle of my moving images. I'd also like to have a white version of the logo and make the navigation links white but only on the homepage. Current password to enter the site is 'testing'.

Any help would be appeciated!

My testing

10 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-nav-item  a{
  color: #fff !important;
}

#collection-61d85cce3ba6b90751e343ba .header-title-nav-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you! It works now but when i'm on the phone version it still ends up with a small black logo in the middle with no navigation options underneath 

Do you know if there's a way for me to make the navigation bar as a text box instead and have it be moved over the photo? So if people see if on the phone it still gets shown over the image instead of in the corner drop down menu? I've got the text as a block underneath the images on the homepage. Also one issue I've seen on the phone is when you click the navigation dropdown the logo appears over the text. So it would be nice to just have the 4 options under the logo on the main screen if possible?

I've added the code to make the logo white on the mobile version as well.

edit: sorry to keep asking for more help. I'm trying to now increase the logo size on the phone but I can't seem to do it using the 'width' code.

Try the following code to set on mobile

@media screen and (max-width: 767px){
  #collection-61d85cce3ba6b90751e343ba .header-display-mobile .header-title-logo img {
    max-height: 90px;
    filter: invert(1);
  }
  section[data-section-id="61d85cce3ba6b90751e343bb"]  .content-wrapper {
    margin-top: -86.6562px;
  }
  #collection-61d85cce3ba6b90751e343ba .header--menu-open .header-title-logo {
    display: none;
  }
}

Let me know how it works

3 hours ago, bangank36 said:

Try the following code to set on mobile

@media screen and (max-width: 767px){
  .header-display-mobile .header-title-logo img {
    max-height: 90px;
    filter: invert(1);
  }
  section[data-section-id="61d85cce3ba6b90751e343bb"]  .content-wrapper {
    margin-top: -86.6562px;
  }
  .header--menu-open .header-title-logo {
    display: none;
  }
}

Let me know how it works

Ooh looks great now, almost there 😛 Now the only issue is on the other pages the logo is still white/inverted so it can't be seen at the top anymore.

Actually all done now, I managed to change your code slightly to make it work on the rest of them. Thank you so much for all your help!

This was the full code in the end with some of my minor tweaks:

@media screen and (max-width: 767px){
 .header-display-mobile .header-title-logo img {
    max-height: 90px;
    
  }
  section[data-section-id="61d85cce3ba6b90751e343bb"]  .content-wrapper {
    margin-top: -86.6562px;
  }
  .header--menu-open .header-title-logo {
    display: none;
  }
}

#collection-61d85cce3ba6b90751e343ba .header-display-mobile .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-nav-item  a{
  color: #fff !important;
}

#collection-61d85cce3ba6b90751e343ba .header-title-nav-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

3 minutes ago, Nordin said:

Actually all done now, I managed to change your code slightly to make it work on the rest of them. Thank you so much for all your help!

 

This was the full code in the end with some of my minor tweaks:

 

@media screen and (max-width: 767px){
 .header-display-mobile .header-title-logo img {
    max-height: 90px;
    
  }
  section[data-section-id="61d85cce3ba6b90751e343bb"]  .content-wrapper {
    margin-top: -86.6562px;
  }
  .header--menu-open .header-title-logo {
    display: none;
  }
}

#collection-61d85cce3ba6b90751e343ba .header-display-mobile .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-title-logo  img{
  filter: invert(1);
}

#collection-61d85cce3ba6b90751e343ba .header-display-desktop .header-nav-item  a{
  color: #fff !important;
}

#collection-61d85cce3ba6b90751e343ba .header-title-nav-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

 

Good job bro

It's good to know that you 've figured it out