Streaming live at 10am (PST)

Navbar on mobile is invisible

I don´t know what i did, but navbar became invisible on mobile. Help, please.


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

You need to share your project’s read-only link before anyone can attempt to help you.

https://preview.webflow.com/preview/easy-english-online?utm_medium=preview_link&utm_source=designer&utm_content=easy-english-online&preview=d4bff974a3f9a81f71f44ce98d400d6d&mode=preview

It’s because of the negative margin you have set on the element Navbar:
image

If you remove that, then your content will display. At the moment, the negative margin pushes your content off-screen.

Thank you very much! I didn´t know why it happened. slight_smile
May I ask you a question about logo?

No problem! :slight_smile:

Sure, go ahead

slight_smile. I wanted to move logo more to the left so it´s not in the middle while it´s seen on a mobile.
I think because of this I had negative margain.

Here’s how I would personally achieve this (some people may disagree, this is just my preferred method).


Clear out all of your styling from logo - you’ve got all sorts of unnecessary margins etc going on there, in my opinion.


Instead of a container, use a Div element. I call mine navbar-wrapper.

image


Flex the Navbar Element, with content centred.

image


Set a max width to navbar-wrapper, flex content justified as “space between”. Assign padding as required (e.g. 30 px).


Now that that’s all in place, you can very easily use the left padding of navbar-wrapper to position the logo as central or as far left as you want it on mobile breakpoint. If you want it more central, increase the padding to 100px for example.

image


image

Thank you! This is my first project. I´ve never done it before. And I´ve got a lot of questions while working on it. :slight_smile:

1 Like