Help: Nav bar doesn't look the same on different pages

Hello there, I’ve gone over and over what could be wrong with this nav bar, but I’ve got nothing. On the mobile previews, it looks great — except on the home page, where the brand image is pushed to the left side way too much. I’ve added an override and everything, but it still won’t let me move the brand image without changing all the other nav bars negatively. I’ve deleted the symbol and replaced it and I’ve even gone so far as to start a whole new nav bar from scratch.

Any help would be much appreciated!! My read only site is: https://preview.webflow.com/preview/timothy-porche-homes?utm_medium=preview_link&utm_source=designer&utm_content=timothy-porche-homes&preview=5646ff9c5c1c47014713cc62edb6544d&pageId=60db6d80f4f6d4a430c50a8c&workflow=preview

Are you wanting to change the look of the navbar on just the homepage specifically? Symbol overrides currently only allow for text/image updates—any other style change would need to be made either via custom code on the page specifically or with an “unlinked” (or separate) Symbol entirely.

One thing to note is that your Brand link wrapper will have a pseudo-class of Current on the homepage only (since the link is the same as the page itself) so that may also be causing some differences in appearance:

image

No, I am trying to make them look the same, but the brand image on the home page is pushed to the left of the navigation bar, unlike all the other pages where the brand image is in the center as it should be. Aren’t navigation bars/symbols supposed to look the same across all pages?

Thanks.

Ah okay, thanks for the clarification! It looks like it’s an issue with the Current pseudo-class—the two screenshots below are of the Brand link on the Home and About pages respectively:

The homepage instance is showing that it’s display: grid with 0 padding on either side, while the About page (non-Current) is display: block with 69px of padding on the right side. Since the changes appear to have been set on the base breakpoint, I’d make sure you clear any styles showing in blue from the Current version so it’s inheriting all the updates from your other pages:

When it comes to brand links in the navigation, I’ve just gotten in the habit of updating styles on any page that’s not the homepage (or the page it’s linked to) as it’s easy for the two version to get out of sync otherwise. Given your brand link typically doesn’t need to differ between the two versions (unlike a nav link that may have an underline or separate color) there’s not much need for the Current version to have separate styling.

Bless you!! Thank you so so much. I truly appreciate your help. I’m fairly new here and still learning, so I was completely baffled! I don’t know how I manage to get things out of sync on the mobile but not desktop versions!!

Of course, always happy to help out and I’m glad it was able to help you solve the issue!

Good luck on the project! :webflow_heart:

1 Like