Hey @jogo88 If you would like the floating header to be displayed later on (further down on the page scroll), you would increase the number. So at the moment the conditional formatting is âWhen current scroll is greater than 600 pxâ â This element is visible. You would change that to something like 1000px or more depending upon how far down the page (in pixels) you want it to show.
You can have elements fade in using transitions â for the floating header itâs probably easiest to achieve through the workflow. If you have the conditional formatting of the floating header to look like this:
Here is a smaller example I made in the app using three submenu buttons:
Preview:
Editor:
I think this easiest way to do this is to use the âSend Dataâ to a group method (similar to the Bubble tutorial: Sending data to a group on Vimeo)
To make the submenu work, we can use a repeating group and a group. The repeating group will display all of our âSubmenuâ buttons when the page is loaded, and when a âcellâ [submenu button] is clicked, the workflow allows us to send/display data of that clicked Submenu Button, to the Group below it.
To do this, I created a new data type called Submenu:
Then created the fields âTitleâ and âImageâ (here you can add as many fields as youâd like but I just kept it to two in this example). Once you have this set up, you can go into the App Data tab and create new Submenu app data entries:
This set up is searching for my submenu items, and displaying a fixed number of 3 cells (because I only have three menu items in this example). Squarespaceâs homepage has 8, so the difference would just be to make the repeating group wider and the column number would be 8). Within each cell, there is a button element and the data source is going to be 'Current Cellâs Submenu Title", with the styling of the âSubmenu Buttonâ:
Then in the workflow you would say, when the Submenu Button (the one in the Repeating Group) is clicked â Display Data [in Submenu Group] Current Cellâs Subemenu
Hi Fayewatson, i got the floating header working. Thank you so much, that was super helpful. I have 5 submenu items. Iâm gonna take a look at what you did and see if I can get it to work too.
Is the default always going to be food? Or do i need to set it up somewhere as to which item is the default?
How can I change the color of the submenu when it is active (clicked)? I tried it in the condition tab but when I chose âwhen clickedâ it only works during clicking. After you click on it, it goes back to the old color.
So if Iâm gonna follow squarespaceâs example, Iâll just delete the main image, put the group there with the image, text and button inside it right?
Thank you so much and sorry for the newb questions.
So with that setup, yes, the default would always be âfoodâ. You can change this depending upon how you âsortâ the results. I did not set up a âsortâ option, so Bubble automatically sorts by Created Date (I think). Meaning, itâs choosing âFoodâ every time because Food was the Submenu first data entry I created of the three (bottom entry).
However, if we were to change this to sort by âTitleâ for example:
âDescending? âNoââ means we are going in alphabetical order. So, with this set up, âFashionâ will be shown by default. By selecting âYesâ, Music is shown by default (Reverse ABC order). Food would not be shown because it is always in the middle of ABC order of the three (Fashion, Food, Music vs. Music, Food, Fashion).
In the conditional tab of the submenu button, you could have this statement (or underline, change color, whichever you prefer to indicate it is âactiveâ):
And yes, you could definitely customize this and use that set up by deleting the main image and placing a group there. Definitely up to you on how you customize it. You could keep an image as a background image, and place the submenu group over it. Any way you prefer
**You could set up a field within the Submenu Data Type called âOrderâ (Type: Number, List: No). and then associate each submenu data entry with a number. Then in the Submenu Button Repeating Group you can sort by âOrderâ, Descending: No. And then use that same sort option for the Submenu Group.
Hi fayewatson, thanks so much for all the help. 1 more question, I took out the main image and placed the group instead with the image inside, heading and subheading. My problem now is that the image doesnât resize even if I stated the size to be 1200x617. some image stretches, some donât. How come? How can I fix this and would I have a problem with the responsiveness?
No problem at all So for images to be responsive you have to change two settings, on the page itself and on the image element. When you open the property editor of the page (double-click on a blank area of the page), scroll down to this option:
Make sure âmake this element fixed-widthâ is unchecked (weâre telling Bubble we want our page to be responsive by doing this). Then go back into your imageâs property editor and make sure âfixed-widthâ is also unchecked there, and âkeep element in proportion as page is resizedâ is checked.
Here you can adjust more responsive settings while viewing your page at different widths (without previewing over and over). This helps to you make your site look great no matter what size of the browser window (The tutorial that shows when you click âwatch tutorialâ is very helpful: )
I just added a new page of âMinimalistic Buttonsâ (these incorporate icons after the latest update which allows us to combine icons and text in text elements) like this:
Please feel free to use them! They are animated when they are pressed. It is probably easiest to copy+paste the Style in your app, and then go back and copy the button itself in order to have the text and style of the button.
So I did the group and placed the main image inside it as well as the heading and sub heading. My problem now is I canât get the position of the âget startedâ button correctly. I was thinking of including it in the group to solve the layout problem but when I try to add a new field in the SubMenu data group, thereâs no option for button? How will I do this?
On a different note, I wanted to make this the homepage so I was renaming the default index to Old_index and renaming this page as index but it wonât let me rename index. How can i make this the default page then?
Thereâs an option to âMake this page Index.â Bubble doesnât let you rename the index yourself, for obvious reasons. When youâre on the page you wish was your new Index, click the âEditâ menu on the tool bar. The last item on that menu is âMake this page new index.â Click that, and Bubble magic!
Hi @jogo88 You can include it in that group â youâd just type âGet Startedâ in the button text field, instead of using dynamic data. And exactly what @potentialthings said! Bubble magic!
So using a button element here:
Then placing it in the group with any âStyleâ you prefer:
Iâm working on the reset password page. Please take a look at the screenshot
for the password and confirm password field, I just applied the style from stylespace but if you look at the preview page, it works on the confirm password but not on password.
2.Also, I donât understand how come the box (forget password group content) stretched in the preview when I didnât change any of the settings.
3.for the footer, I added some fields from stylespace page and included it in the footer. Now I added the footer on the reset password page but when I preview it, its left aligned and not being centered. How do I fix that?
Thank you so much. Learning a lot from all your help.
Hi @jogo88 I think the best bet is to learn about all of this through Bubbleâs tutorials, as well as the responsive tutorial. Those videos explain why elements will stretch, shrink, and how to align (https://bubble.io/documentation) and then there are also more videos here: https://vimeo.com/bubblegroup. For specific questions about your app its best to create new topics in the forum with links to your editor when youâve already tried to find a solution through the tutorials and forum. But generally most questions are answered through the tutorials, documentation or forum search. It takes some time to get the hang of it but it will be faster/more efficient to learn how to build your app that way
@NigelG Building on Bubble looks amazing!! I didnât get a chance to see all of it yet but definitely will be later today And I noticed the same thing with the text buttons and workflows yesterday. I filed a bug report just incase; It turns out they will work as expected if you remove the part of the âis pressedâ conditional statement that decreases the font size on mousedown. Emmanuel said itâs a bug with jquery and itâs best to remove that decrease the font size property for now, though they will look for a fix. When Iâm back on my computer Iâll remove that part of things from the text buttons on the Styles app.
If you would like the floating header to be displayed later on (further down on the page scroll), you would increase the number. So at the moment the conditional formatting is âWhen current scroll is greater than 600 pxâ â This element is visible. You would change that to something like 1000px or more depending upon how far down the page (in pixels) you want it to show.
)
And I noticed the same thing with the text buttons and workflows yesterday. I filed a bug report just incase; It turns out they will work as expected if you remove the part of the âis pressedâ conditional statement that decreases the font size on mousedown. Emmanuel said itâs a bug with jquery and itâs best to remove that decrease the font size property for now, though they will look for a fix. When Iâm back on my computer Iâll remove that part of things from the text buttons on the Styles app. 