Jump to content

Navigation Bar class name

Recommended Posts

I'm trying to create a dynamic navigation bar using CSS and JS.

The idea is for the navigation bar to change height and logo after scrolling.

ChatGPT is helping me code but it needs to know the class name os the navigation bar.

Can anyone assist with this issue?

Link to comment

Hi,

Thanks for the quick answer!

I'm a bit out of practice with coding and squarespace so I'm using chatgpt's help and it's not really working at all ahaha...

chatgpt its telling me to add this css: 
 

/* Initial navbar state */
.navbar {
    height: 145px; /* Default height before scrolling */
    transition: height 0.3s ease; /* Smooth transition for height change */
}

/* Scrolled navbar state */
.navbar.scrolled {
    height: 70px; /* Height after scrolling */
}

/* Initial logo state */
.navbar .logo img {
    height: 130px; /* Default logo height */
    transition: height 2.3s ease; /* Smooth transition for logo size */
}

/* Scrolled logo state */
.navbar.scrolled .logo img {
    height: 65px; /* Height after scrolling */
    content: url('link-redacted'); /* Scrolled state logo URL */
}

/* Default logo state */
.navbar .logo img.default {
    content: url('link-redacted'); /* Default logo URL */
}

this html to the header in code injection:

 

<div class="navbar">
    <div class="logo">
        <img class="default" src="link-redacted" alt="Logo">
    </div>
</div>

and this JS to the footer:
 

<script>
  $(document).ready(function() {
    $(window).scroll(function() {
      if ($(window).scrollTop() > 50) {  // Trigger change after scrolling 50px
        $('.navbar').addClass('scrolled'); // Add scrolled class
      } else {
        $('.navbar').removeClass('scrolled'); // Remove scrolled class
      }
    });
  });
</script>

it's not working so what should I do?

Thanks for the help!

Link to comment

Is there a reason you're using custom code @hmpbs rather than the native Squarespace navbar?

This can be achieved without scratch building a navbar and will be a lot easier to maintain.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

Link to comment
13 hours ago, KwameAndCo said:

Is there a reason you're using custom code @hmpbs rather than the native Squarespace navbar?

This can be achieved without scratch building a navbar and will be a lot easier to maintain.

My client has two logos: a detailed main logo that loses clarity when scaled down, and a simpler secondary logo that's better suited for smaller spaces like the navigation bar. The idea is to showcase the main logo prominently at the top of the page, with the navigation bar's drop shadow removed for a cleaner look. As you scroll down, the logos would swap, and the drop shadow would appear

Link to comment
4 hours ago, hmpbs said:

My client has two logos: a detailed main logo that loses clarity when scaled down, and a simpler secondary logo that's better suited for smaller spaces like the navigation bar. The idea is to showcase the main logo prominently at the top of the page, with the navigation bar's drop shadow removed for a cleaner look. As you scroll down, the logos would swap, and the drop shadow would appear

Yes, this would be possible by using the regular navigation + code. I've done it a few times over the years for older clients.

Creating a totally custom navigation is overkill for this.

If you're doing a logo swap, I would seriously consider how you want the transition to work though... does one fade out and the other fade in etc.

But yeah, don't rebuild from scratch, especially if you don't know what you're doing because you're going to run into jankiness and it's overcomplicating. And you're likely going to waste time whenever you want to update or if you have to troubleshoot. 
Focus on just swapping out the logo on scroll from the current nav.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

Link to comment
20 hours ago, hmpbs said:

Can anyone assist with this issue?

If you'd like specific advice, please share a link to your site with the community.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
52 minutes ago, KwameAndCo said:

Yes, this would be possible by using the regular navigation + code. I've done it a few times over the years for older clients.

Creating a totally custom navigation is overkill for this.

If you're doing a logo swap, I would seriously consider how you want the transition to work though... does one fade out and the other fade in etc.

But yeah, don't rebuild from scratch, especially if you don't know what you're doing because you're going to run into jankiness and it's overcomplicating. And you're likely going to waste time whenever you want to update or if you have to troubleshoot. 
Focus on just swapping out the logo on scroll from the current nav.

That was my initial idea. I wanted to find the class of the nav bar to edit it with CSS but couldn't find it anywhere.

As to the swap I think a fade out and in would be best. 

How can I add code to the current nav without creating a new one by accident as I did before 😅?

Link to comment

As Paul requested, you really need to share a link to the site.

We are operating blind if you don't do so. And even those of us with years of experience are going to struggle to help without being able to see and confirm.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

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.