Mobile nav not displaying, and Link block issues

Hello!

I’m close to giving up. I have a hamburger menu on tablet and mobile devices, but a few issues:

Navigation issue

  1. It doesn’t display on mobile or tablet views in the preview mode.
  2. At some point I managed to show the navigation, but it would not open when tapping on the icon.

Link block issue
I followed some guides on how to create a button with an image inside of it - but it doesn’t scale correctly, and I can’t get it to work. Any suggestions for what to do?

Appreciate any help on this :slight_smile: Thank you!

Here is my site Read-Only: https://preview.webflow.com/preview/malermester-jackson?utm_medium=preview_link&utm_source=designer&utm_content=malermester-jackson&preview=581cd7ec131c95461bad89eef3ff461b&mode=preview

Hi - I cannot get your Read only link to work :wink:

Oh sorry, try this now: https://preview.webflow.com/preview/malermester-jackson?utm_medium=preview_link&utm_source=designer&utm_content=malermester-jackson&preview=581cd7ec131c95461bad89eef3ff461b&mode=preview

Now the link is working :slight_smile:

Hi again. I am new to Webflow and are learning a lot from looking at other peoples work :slight_smile: Malermester Jackson får en fin site :smiley:
You may be using too many elements to get where you want. I took a lot out of your hero section and used margin to push the text down. (see image)

The problem with the burger overlapping on mobile can be helped by giving the logo more top margin and the burger negative margin. This will only affect the mobile version.

The burger works in my browser
Hope this will help.

Hey! Wow thank you for your feedback!!

I’m also very new at this, so I’ve most definitely messed up a lot of places. I added the columns to the hero as I thought it was easier to manage the spacing between break points, but you might be right that I should just use margin instead.

Thanks for the tip about the burger menu. I’ll give that a try!

Now, I’m just struggling with the navigation. I want to have a different logo version appearing at the top, and when scrolling I want to add a solid white background to the navigation, and change the logo. Watching a lot of tutorials, but seem like I have a long way to go … :slight_smile:

Webflow university has come with some updated videos that actually explains instead of showing off. Apart from the cringing and lame jokes (that ruins my consentration) it was helpful to understand more about the different settings. You must scroll down to the section New & featured lessons :smiley:

https://university.webflow.com/

I’m having a look at your read only link right now. Be back in a minute.

Back, let’s go back to the beginning:

  1. I see the burger and have the menu open well on tablet and both phones. What’s the issue still? (The drop down menu could be fine tuned too)
  2. “I want to have a different logo version appearing at the top, and when scrolling I want to add a solid white background to the navigation” On desktop? Mobile?
  3. the button with an image background, where is it?

All in all let’s takes issues one by one.

Something to know: the navbar menu is a very delicate beast. It’s a preconfigured element in Webflow and it has many crucial settings. Fiddling too much or too long with it ends up breaking it, often. No worry, instead of trying to fix it and add to the mess, it’s better to… start over with a fresh menu. Most likely, at the moment you start over, you have a clearer view of what you want, ending up in a more straight forward process and a more solid result.

1 Like

Hi @vincent!

Thanks so much for this.

  1. I managed to fix it by starting over :slight_smile:

  2. The logo change + solid bg change from transparent to white should only happen on desktop. I want the big logo to animate down to an alternative, more compressed version when scrolling down, and then when you get to the top of the page again, I’d like the big full version logo to be shown. So I assumed that I need to create two nav bars where one is hidden and only shows on scroll. But I didn’t succeed with this yet. Any tips on how to go about this is very much appreciated!

  3. I gave up on the link block with image bg - I’m just using plain image as button for now. Not ideal, but I guess it can work :slight_smile:

Haha yes I know what you mean… :wink: I’ll check those new videos out. Thanks a lot!

I believe I actually fixed the bg transition issue now by adding animations to the scroll down / up.

However, on Mobile there’s an overflow issue - where scrolling on the page is a “rubberband” feel.
I tried setting the Body to “hidden overflow” but then you cannot scroll on mobile at all. Do you know what I’m doing wrong?

Also on tablet and mobile views the menu suddenly shows as open and sticky at all times. I didn’t change anything that I’m aware of which should affect that? :confused:

https://preview.webflow.com/preview/malermester-jackson?utm_medium=preview_link&utm_source=designer&utm_content=malermester-jackson&preview=581cd7ec131c95461bad89eef3ff461b&mode=preview