Hi @matthieu_chateau this is the best SOFTR custom code I have seen yet. I am trying to use this as a menu bar and set it up for desktop but I donât have a working solution for mobile. Do you have any code to turn the CTA or custom code buttons into a hamburger menu bar/any sort of dropdown. That would be insanely helpful!
Here is the new code to have a dropdown when on mobile
Insert it a custom code block, above the blocks you want to display. These are hard coded buttons, not CTA block buttons
Yes, but before I need to know which version do you want to use (I need to get this organized, there 3 or 4 different versions of the tabs featuređ ).
if you want to use this feature with a Softr CTA block, it is going to be a problem as it needs the cta block to have the option âscroll toâ. Otherwise the buttons have a default behaviour which leads the user to the homepage. That being said Iâm gonna ask Artur to remove this behaviour from CTA buttons, as it forces users to add additional stuff when they want to insert code.
I could add an event.preventDefault() but asking Softr team to remove this would be easier⌠for everyone!
If you want to use custom, hardcoded buttons, yes, itâs possible Here. You see the code? just remove all the lines with document.getElementById("blockX").scrollIntoView("blockX");
Iâm using the hardcoded so I can fully customize the buttonsâŚ
It worked beautifully, thank you. This has completely changed the user experience on my app now, thank you! (It also makes it easier to manage on Softr as its just one page.
So, how can I have some fun with the code to customize it⌠i.e. adding some animations to how the new block is displayed. I saw one example had the block come in from the left?
Concerning new page in the same modal => no, as Softr team decided to not let this happen anymore (unfortunately) if Iâm correct. I will try to find a solution with a JS snippet. It will appear in the âcustom codingâ section of the public community if I find it
This one creates a dropdown on mobile => you can set the custom code block only available for mobile, if you want. Unless you use only a âsimpleâ hardcoded buttons version (I mean: not the âon start tabsâ. If you use the âon start tabsâ you will have to play with the device visibility of the related custom code block).
If youâre not very comfortable with code => please just use the responsive version with hardcoded buttons (so no lateral tabs) otherwise there will be conflict everywhere that I wonât be able to solve by lack of time.
If problems or other inquiries= DM as I want the thread to stay readable, thanks!
@matthieu_chateau Iâm using this a bunch in my app now but I just went to implement it using 2 custom-code blocks (switching between 2 embedded sites using 2 buttons at the top of the page) and it doesnât seem to like that.
It hides the second custom-block but wonât switch to it. Iâm fairly certain I donât have any errors in the code; however, do you know if A) this is even possible and B) does the code need to be modified at all to work with custom code blocks?