I have the same element with the same class in the same symbol on 2 different pages but the elements are styled differently... Why?

[TriceWD (Jordan Brooks)]

Is someone available to help me out on this one?

I have 2 elements with the same class, that are part of the same symbol, that are on different pages but look different.

Please see the header links on the “Home” page and compare them with the header links on the “Books” page.

---

Here is my site Read-Only: https://preview.webflow.com/preview/newellwebsite?preview=8abff49bdf127e64f0b8f062aaa4ace0

[Brando (Brandon Roche)]

Hi @TriceWD

Thanks so much for posting about this.

I took a look at your site and it appears you have a class assigned to the body on the Home page, but not on the Books page. With this body class you have some different text styles that are being inherited by those nav links.

Home page

Books page

To resolve this you can:

1. Set the same body class on the Books page
2. Remove the body class from the Home page, and use the All body tag to set those default font styles

Hope this helps

[TriceWD (Jordan Brooks)]

Much appreciated Brando!

This solved the issue.

May I ask what your process was on how you found out the problem?

I’m returning to this project after a few months so it’s tough to remember all the class names, positioning, etc…

Just wondering how you came up with a solution so quickly.

[Brando (Brandon Roche)]

Hi @TriceWD

Good question! In this case I took a look at the nav bar on the home page and took note of the font styles. Specifically, I noticed the Roboto font family being used was coming from the body class:

I then went to the Book page and checked the navbar there and it had a different default font family (Arial).

As CSS styles cascade down, I assumed there was a style/class applied to the body on one page but not the other. I checked the Book page Body and noticed there was no class name applied.

I hope explaining this process helps

[TriceWD (Jordan Brooks)]

Yup, it does. Thank you! Much appreciated.