Edit mobile sidebar menu

It’s possible to edit the siderbar menu? for example adding social under pages or logo on top?

You question is a little vague. Details, and images, a link or video can help.

Check mobile version of this website: http://www.studioecp.it/, it opens the same menù bar of desktop version.

On mine website I have only black background with pages list

You will have to take a different approach to build something similar to that then using the Blocs built in menu.

It is possible to create, but thats not often within the scope of the free help you get in this forum. Everyone here volunteers their time to help.

On blocs sidebar menu I want only to add logo on top, it’s possible?

EDIT: I did this, thanks!

Looks great. How did you do this?

@Mattheus

One of the ways to do this:

1 Like

@Eldar Thanks for the video - very interesting way to do a sidebar. But, did you find a way to make the slide-in animation work on every click of the icon? On my system it slides in on the first click but subsequent clicks just makes the sidebar appear instantly. I’ve also noticed that the sidebar isn’t scrollable if the content is too long. Are there any tricks to make the sidebar slide out and fix the long content issues - maybe I’m expecting too much!!

Hi @Eldar

+1

Found how to get the sidebar, at least, scrollable

Add a class with overflow: scroll

MDS

Hey guys, I completely missed this thread!

Yes, I guess the solution with overflow:scroll can help with scrolling issue. I haven’t tested this myself though.

As for animation being shown only once, I am sure there is a way to do this with code, but honestly, I thought that once a person opens the sidebar, he/she is either going to another page (where the animation will reset), or just closing it for good. There might be situations when somebody will want to open and close it multiple times without leaving the page, but in reality, I don’t think it’s a common scenario (unless you are testing how sidebar works :smile:)

1 Like

Hey there! I followed Eldar’s great tutorial above to create a full-viewport sidebar menu, and each link in the fullscreen menu has an interaction that directs users to the relative section on the website. Everything’s working so far, but I would like for the sidebar to close automatically once a user clicks on one of the links and is directed to their target section of the website. I’ve come across this topic on the forum but neither of the options is working for me… any help, please?

@Pealco’s solution as suggested here works perfectly for me:
Kapture 2022-05-26 at 18.17.54

1 Like

Thanks for the help Jerry. I copied and pasted the code in the page footer as per Pealco’s solution but no luck for me.
Screen Recording 2022-05-26 at 15.41.23

I’m using Eldar’s solution to implement the fullscreen menu as it gives more freedom for stylising it compared to the standard bloc navigation. Maybe this limits this particular functionality?


There’s no need to paste code into the footer, you just need to add the custom attribute to the navbar list. Here’s the file to get you started:
Scroll Close Menu.bloc (1.4 MB)

That worked a treat thank you. Using the native bootstrap Nav Bar seems the way to go. But how to make the sidebar full screen though? I tried to apply a custom class to the nav container with 100vw then position absolute and fixed with 0px edge all around but nothing, the sidebar doesn’t change its width. I also checked the Special Navigation Background subclass but - as the name suggests - it’s only able to change the background of the appearing sidebar.

Feel like I’m running in a circle now… I can either have a navbar that disappears when the user clicks on the link or a full screen navbar but not both :frowning:

The Nav bar has a full screen option as well. It’s in the inspector.

1 Like

That easy :man_facepalming: I don’t know how I could have missed it. Thanks for the patience Jerry.

Also came across this other post which solved the remaining issue of stylising the text for the full screen menu. Awesome!

Thank you Jerry! :index_pointing_at_the_viewer: