Site Not Rendering The Same In All Browsers

We designed this site from the Alpha Template in the Chrome browser. However, when we inspect the site in Safari and Firefox the site is not looking like it does when opened in Chrome. If someone would kindly explain to us how to fix this issue, we would appreciate it. Please find attached photographs the site view in Firefox and Safari.


Here is my site Read-Only:
https://preview.webflow.com/preview/deft-ux-design?utm_medium=preview_link&utm_source=designer&utm_content=deft-ux-design&preview=dd1ea536d47b89511992ab9809c8b8d9&mode=preview

The way you’ve gone about constructing the header elements within the Sticky Menu symbol seem to be the problem which is affecting how each browser interprets the elements.

This video should explain what I’m thinking will fix the problem and hopefully it makes working with these elements a bit easier along the way:

I won’t be able to test this myself as you’ll need to publish the changes, but hopefully that points you in the right direction :v:

Wow! Thank you very much. Watching your video now and will attempt changes. We will let you know how it goes. Incredible.

One quick question. Does it matter which browser we open the webflow editor in, to compose site? safari, chrome, firefox, etc…thank you. Still watching the video speechless.

I personally use Chrome for development (as this was the first browser support as far as I know) but you should be able to use Safari/Firefox as an alternative.

Good luck on getting the fixes implemented and feel free to reach out if you have any questions!

Good evening Mike,

Just a quick question, I have these lightbox images wrapped in a 3d card under selected works on the home page. The alpha website template came with these features already. We would like to add a hyperlink to the image, so that when the user clicks the image, they are routed to the actual portfolio item. Tried dragging a link block into the lightbox field image under selected works. System responded “cannot add link block to light box”. Is there a way to add individual hyperlinks to each of these 3D content/ 3D wrapper/ lightbox images? Was hoping to keep the effect. Please find share link below…Home Page 3rd section down under Selected Works.

Thank you again for all of your help Mike.

Is there a reason you’re using a Lightbox here? It seems like if you’re wanting your users to click through to a full page on the project, the Lightbox functionality is unnecessary. I’d change this to a normal Image element instead.

Once you make that change, you should be able to wrap that Image element in a Link Block :+1:

That makes a lot of sense…can i still keep that 3D effect when users hover over the image under selected works? Thank you again for your help Mike.

Totally, the 3D effect is placed on the parent—in this case, the Lightbox element—so you should have no problem structuring what’s inside however you’d like. Keep in mind you’ll probably need to re-add the effect to the new parent element (since I’m guessing you’ll be removing the Lightbox) but the idea is the same.

Good Afternoon Mike, quick question when trying to change text email and phone # in the hamburger menu using the editor, the Home page comes up. The next option I try is to use the navigator to manually change the field which allows me to fix the href: to what I want, but the class is only accessible through the editor and I’m back at square one. I can only see the hamburger menu page when in preview mode but reverts back to homepage when in editor. Would just like to change the class to match the href. please see attachments and share link below…Would I have to embed custom code for what would appear to be such a simple fix? Thanks again.