Responsive nav problem

Hi. I have a nav bar which includes a logo centred within the nav menu. All was looking fine until I started the process of making the navigation responsive. In the hamburger menu I had thought that all I would need to do was remove the logo on tablet and below and reposition it however when I do the desktop navigation changes as well ( it is a symbol) Is there a way to edit the position of the logo on smaller screens without affecting the desktop version?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@soutrasteve - this is hard to troubleshoot without more detail. However, what you are trying to do is most likely possible as long as you aren’t trying to actually re-order elements in the navigator in Webflow as that will move their position in the DOM - which will have effects on all screen sizes.

Screenshots a read-only link will be necessary to troubleshoot further.

Thanks for your reply sam-g. Read only link here: https://preview.webflow.com/preview/beer-shop?utm_medium=preview_link&utm_source=designer&utm_content=beer-shop&preview=c7fde6387367604a61a0c388f06d2391&mode=preview
S

Hey @soutrasteve - sorry can you provide screenshots or more context on the issue you are experiencing?

screenshots attached

Hey @soutrasteve - What I would probably do in this scenario is have two instances of the logo, one for desktop and one for mobile. Hide the mobile when the width is desktop and vice versa on mobile. That way you don’t have to move the logo to another element.

That should accomplish what you are trying to do.

Hi Sam. I’m not sure how to do that could you give me some pointers please?
S

I assume that @sam-g is talking about having one instance of the logo “mobile” and one instance of the “desktop” logo.
Mobile logo is hidden in desktop and tablet, visible in mobile.
Desktop logo in visible in desktop and tablet, hidden (with display: none) in mobile.

@soutrasteve - did you get this figured out?

Here is a quick overview:

image

Your existing logo inside the nav menu, added combo class desktop

Copy of logo:

image

Added combo class mobile

image

You want to show the mobile on mobile and hide it on desktop, vice versa for the desktop logo. There are a few alignment issues to fix, but this is the result:

Thanks very much for this Sam. I haven’t had a chance to look at it again but will do soon. Cheers