Can't change navbar colour on specific pages

Hi,

So I have two problems that I’m dealing with. I have been doing some small changes on my website. I had an ugly hamburger menu for the mobile version of my website that I have now changed to have the same menu for all devices.

Can’t change the menu colour on specific pages

My problem is that I never really learned how to use classes properly. I want the menu to be black on all pages except the home page. But no matter what I do, when I change the homepage’s menu, even trying to use classes, it changes the colour of the other ones as well. Another thing is that although I change the font of the mobile navbar to the same as the laptop version (and it appears the same in editor) it shows as a thin version when I check the website out on my phone. That’s my first problem.

Problem with laptop/tablet/mobile versions and how they appear

The other one is that I have one single page left that is pretty buggy as it is now and it’s my “About” page. One thing is that I want the tablet version to appear as close to the laptop version as possible. But it keeps using only one row as in the mobile version, instead of two.

The other problem is that the text that fits in the laptop version does not appear in the mobile and tablet version and I can’t seem to figure out how to fix it.

Any help would be much appreciated!

Read only link

Published link

HI

YOUR publish link is broken.

‘content’ element has 116px negative margin on top, and because of Z index issue it prevent (“hide”) the access to top menu. Set the top margin to zero and the menu will back to active.

12

Thank you for your reply. Not sure if I understand what you mean. I have kept an old Navmenu that is hidden, now deleted. Is that what you are referring to?

My problem is that I can’t change the colour of the navbar on specific pages. No matter how I try to use classes, it changes it for the whole site. Can’t save the navbar as a new (white) element either.

Hi

I recorded My screen when previewing your desktop home page site. Look, the cursor is not change to pointer as expected. In the Tablet view the cursor is acting as expected. To prevent this you need to cancel the negative top margin of “content” element.

https://www.loom.com/share/977a5e2991544979b8d57172e6f4d665

How to fix it? see the screen recording below:
https://www.loom.com/share/cfef54a801e540778a06ff3edf98c5c1

Thank you for noticing that, I fixed that now.

But my main problems are the ones I stated in the post. I made the navbar into a symbol so that I could easily pull that one in on all pages on my site. But now whenever I try to add a combo class on my homepage to make the navbar white, it changes on all pages anyway.

How do I fix this?

EDIT: SOLVED
I did this…

o quickly make a symbol duplicate:

  • in the designer (page) select a symbol
  • cmd+c cmd+v
  • shift+cmd+a (unlinks the symbol)
  • shift+cmd+a again (create a new symbol)

Still have the problem with the “About” page on mobile though

The problem is in the position of the text element that set to Absolute.

But so is the text that is shown on the mobile version as well. And that one shows.
They were set as absolute from the template I started from for my site, and if I do anything else, they move in all kinds of different ways.

Hi

Checked the mobile - it doesn’t show there

https://www.loom.com/share/69cf1824744b41c49bdbfa4368485d9f