How do you make the navbar menu slide in from the right?

Design help General
#1

Like so: www.bolismedia.com

#2

Hi @PinMan looks like a normal navbar on the site you sent (viewing from desktop), but I’m assuming you mean mobile nav sliding in? If so, you can achieve this in the responsive settings. If you send more details and a read-only link for your site we can take a closer look though :slight_smile:

#3

Yes. Mobile responsive. If you hit F12 in Chrome browser, ull see that the dropdown menu from the hamburger navicon is right aligned

#4

Got it. Yep you can do this in the responsive settings, so select the nav bar, then click the gear tab (above the right panel), then change the “menu type” to “over right”—this will make it swipe in from the right (and be right-aligned) like in the site you sent. You can also adjust when the mobile menu appears by changing the slider below that section with the pictures of different devices. I’ll attach a screenshot for reference :slight_smile:

25%20
Screen Shot 2019-07-06 at 17.50.25 .jpg480×956 49.4 KB

Hope that helps! :wave:t2:

#5

Do you know how to to transform the dropdown menu into the one EXACTLY like the one in @ www.bolismedia.com?

I want to chop it in half and right-aligned

Thank you so much for your help, YouTube doesn’t have much.

#6

If you can send the read-only link for your site I will make you a short video :slight_smile:

#7

read only link

www.traffickfreak.com

#8

@PinMan please use this tutorial to get your read-only link:

#9

https://preview.webflow.com/preview/practice-page-8c9f7f?utm_medium=preview_link&utm_source=dashboard&utm_content=practice-page-8c9f7f&preview=697269cd18e7f7a416fecf12b65ce3a1&mode=preview

f12 hotkey to view mobile

1 Like
#10

Thanks @PinMan!

Here you go (also tried some other customizations you may or may not want, but it’s all in read-only mode of course so you can pick and choose what you want to do yourself. :slight_smile: )

#11

So the devil here was the container. Details, as they say. I followed all that to a T, but the top button in the drop-down menu gets automatically clicked when the hamburger navicon is selected. Do you think it’s just pixel space?

#12

That wasn’t happening for me, but yeah maybe—you could try adding a top margin to the nav panel equal to the size of the nav bar so that the hamburger icon is still accessible even after it’s been clicked. Let me know if you need any help with that.