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?
@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.
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.
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.
Your existing logo inside the nav menu, added combo class desktop
Copy of logo:
Added combo class mobile
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:
