Apply class to only home nav bar

Hello,

I am trying to give a unique class to only my home page nav bar. This nav bar is connected to all nav bars on my site. So one change is done globally. My understanding is I need to give this nav bar a class and apply my changes so it only applies to this one - but any new class I create for this nav bar gets automatically applied to the other instances. I cannot add, edit, or remove any new classes and it’s associated attributes without it applying to all instances.

Read only:

HOME
Webflow - NEW Abby Blue

BLOG
Webflow - NEW Abby Blue

Commenting for better reach.
Thanks in advance for the help!

hi @altkey the “issue” you are experiencing is because you are using component. more about component on WF docs. Anyway, here are two ways you can achieve you are going after.

  1. “no-code” way is to unlink nav you are using on homepage. This will give you option to add special treatment for this nav.

  2. use javascript window.location to determine what page you are on and set your changes. The code should be in project setting → custom code

here is example

<script>
const pageLocation = window.location
const myWebsiteHref = "https://my-website.com/" 

  if(pageLocation.href === myWebsiteHref){
   const homeNav = document.querySelector(".my-main-navigation"); //element you will add class
   homeNav.classList.add("my-class");
  }
</script>

Right, I understand this is a component - my issue is I’m not sure how to, how you phrased it, “unlink” the home nav bar from the rest of the nav bars.

what about this.:man_shrugging:

Beside forum solved issues the WF has great documentation to learn how to work with this platform.

Yes I understand that. This platform has great documentaiton. Sometimes when you’re searching for a while and can’t find what you’re looking for, or don’t know the proper terms for somethings so they don’t come up in results, it’s okay to post your question to see if someone has the answer instead of watching 1+ hours of content/searching through articles just to find your answer. I only post my questions when I have difficulty finding what I’m looking for. That’s what this forum community is for. Thank you for sharing this forum post. I did not know the term “symbol” so I did not find this.

That was the answer I needed - thanks, it worked

1 Like

hi @altkey that is totally fine as I have been in your situation with WF before. I only take different approach, I love to learn no mother how long tutorial, book or article is, I use internet to search, I read documentation. Believe me, as fullstack developer I’m learning every day something new I need to use (not Webflow) :wink:

1 Like

Oh yes! Trust me, I am the same way. But I’m reading up on a bunch of other topics and studying, sometimes I just don’t have time to learn about every feature of the app. It takes time for sure, and this is my fourth time building a site with Webflow and I learn more each time. I really love their tutorials - best tutorials on any platform I’ve used thus far! Thanks again for your help on finding the proper term for this.

1 Like