Hi!
I’ve been messing around with Webflow, but, whether based in my somewhat intermediary code knowledge or just general inexperience, I can’t figure out the design process to make this work.
BASICALLY: I’ve got one image as a homepage. It’d be a full image page, but then, when you click on areas of the single image, it would act as an integrated nav bar. See image (not real design layout, just a mockup).
First thought would be floating divs but I can’t figure out the best way to allow for the image to be resized (ie multiple media devices). If anyone has any experience in doing this or for a helpful tutorial/link, I’d be very appreciative.
Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi there,
Great design question!
I think you’re on the right path with the desktop design! 
For smaller devices, I would suggest creating a standard menu that is hidden on desktop, but is available on mobile devices. Then, you can hide the floating divs, or absolute positioned elements, on mobile devices so that users will use only the standard menu.
Definitely a great question!
Hopefully this is helpful 
Thank you so much for the advice - are there any Webflow guides that can show me how to hide/show menus for mobile versions of the website?
Great question, and I’m happy to help!
By default, all elements are visible on all breakpoints. However, you can choose to hide an element on any device or devices. To do that:
Select the element
- Open to the Settings Panel (D)
- Click on the icon of the device(s) you want to hide this element on
- Webflow Breakpoints - element visibility
Setting the display setting to none
You can always hide an element by setting its display setting to none in the Styles Panel. This is a style, so it will cascade down to smaller breakpoints.
Although hidden elements are invisible in the website, they still exist in the HTML on the published site.
You can learn more about breakpoints and displaying at Breakpoints | Webflow University
