7 Replies Latest reply on Sep 23, 2016 12:47 AM by fotoroeder

    pin to the right in design mode doesn´t show in preview mode

    fotoroeder Adobe Community Professional

      I try my very best to compete with this responsiveness of my own website which is in plan mode to watch right here:

      fotografie-roeder.businesscatalyst.com

      This was all done without any breakpoints, which leads to this ugly overlapping between the main menu and the submenu (tiny little black rectangles on the left which appear yellow, once you hover over).

      So what: watch the video from Danielle Beaumont, learn from it, that menus are mainly best done on a Master Page. Doing so, it looks quite good in Design Mode

      ( so far this is mainly for the menu stuff - all the rest might come later, right?).

      As you can see on the screenshot, it functions good in design mode

      Bildschirmfoto 2016-09-21 um 12.20.46.png

      To make clear, what I want - even on larger screens than tablets or 968px screens I want it to look good on 1600 screens as well (my MBP has 1900, even there it appears in good shape). So the first breakpoint is set to 1200 - this is, when the main menu comes too close to my submenu and it looks like this:

       

      Bildschirmfoto 2016-09-21 um 12.38.59.png

       

      Instead of the written menu, there appears the word MENU. So far so good. But in preview, the main menu for big screens appears in the middle of the header - which leads to overlapping after hitting 1200px margin. So why (the menu is pinned to the far right upper right corner as you may see on the first screenshot) and it looks like this:

       

      Bildschirmfoto 2016-09-21 um 12.20.15.png

       

      The menu is not at all on the right hand side.

      Any ideas, why this happens?

      One more issue was or is, that the header with its menus on the master page leads to the issue, that the gallery/slideshow appears above the header when I scroll up/down the page.

      Now, when I did everything inside the "normal" page and leave the master page alone, it works quite fine.

      So, if you now come to my businesscatalyst.com-page you might see a more final result.

      Uwe

        • 1. Re: pin to the right in design mode doesn´t show in preview mode
          Günter Heißenbüttel Adobe Community Professional

          Could you please create a new site and delete all content except the menu system and its anchors (that makes it easier to handle). Then upload this .muse file to Dropbox or a similar service and post the download link here. So we can have a closer look.

          • 2. Re: pin to the right in design mode doesn´t show in preview mode
            fotoroeder Adobe Community Professional

            As far as I did this now the first time with dropbox, I hope it works fine.

             

            Hier geht's zum Ordner

             

            I created two pages as you may see. One with and one without a corresponding Master Page.

            The issue with the menu, appearing in the middle of nowhere was self healing. So I don´t know, how to recreate this issue.

            But interesting for me, why the menu gets hidden.

            Short question, is this done by: send one step back" with a right click?

            Thanks in advance

            Uwe

            • 3. Re: pin to the right in design mode doesn´t show in preview mode
              Günter Heißenbüttel Adobe Community Professional

              I uploaded a corrected file into your folder.

              The main issue:

              Layers are valid not only for one page but for the complete(!) site and all its pages. If you put an element on the master page on top, you nevertheless can put another element on a layout page "above" it. If you delete one layer, all elements in this layer, regardless on which page they are placed, will be deleted too.

              This has to be so. Otherwise it would be impossible to show master page content behind other elements.

              Way out: Go to your master page, open the "Layers" panel and create a new layer above all others. Then activate all menu items (menu rectangle, dots, …) and drag the appearing little dots "onto" the newly created layer.

              If you now pin these element on top, you are done with your menu Just have a look into my file.

              The other issues on your page are related to different kinds of scaling.

              To understand that, read my answer to your question here: difference between Frame tool (M) and (F)

              • 4. Re: pin to the right in design mode doesn´t show in preview mode
                fotoroeder Adobe Community Professional

                Thanks for that, I did understand, that I have to take care of the z-order in the layers palette on the master page as well, right?

                Regarding to the scaling issues: I got this already, first I used a slideshow widget and it worked quite perfect, until I started to add breakpoints. (that was the time, when I asked for the frames - in the meantime I came back to the slideshow widget)

                For this case I have an additional question:

                I watched another video from Danielle Beaumont and heard about different kind of breakpoints: fluid width and fixed width.

                Did I get this right? So i might use a "fixed width breakpoint" outside of 1600px and use "fluid breakpoints" inside of 1600px?

                Because, if I want to have pictures almost always have the "correct" aspect ratio, I am able to use several breakpoints each 100 px width (1600/1500/1400/1300/1200/...).

                With this workaround I might have something like a responsive fullscreen-gallery, I guess (and because I need to do this only on one page, that`s worth it). I also realized, that I can set all breakpoints for the first picture at the top, with all changes of aspect ratio as I think I want it, and once, finished, I can copy the first slideshow frame, change the fillings and done.

                I do not really understand about changing text on certain breakpoints (shift/command/T) to change between (auf diesem Haltepunkt formatieren/auf allen Haltepunkten formatieren). It`s just difficult for me to see any difference.

                One last question about the "close" button for the menu (smaller than 1200px in width). What does it mean to have the trigger on top (Ausloeser oben) inside the composition widget, which I use for the responsive menu. Actually I would like to have the close button at the same place like the "menu".

                If I am further on, I post it here.

                Thanks anyway

                Uwe

                • 5. Re: pin to the right in design mode doesn´t show in preview mode
                  Günter Heißenbüttel Adobe Community Professional

                  • You can have fluid breakpoints (objects scale while resizing the browser window) and fixed breakpoints (objects stay at the same size, until browser resizing reaches a smaller/bigger breakpoint. Right clicking onto the breakpoint will allow you to change this behavior. And: Look at the small icon in the breakpoint bar. They are different for fixed and fluid.

                  • Creating breakpoints wider than 1600 px seems unnecessary for me. Use the "Expand" functionality instead: Click onto the small double arrows besides the breakpoint bar, so that they point outwards. This will expand your page to the window size.

                  • Use breakpoints sparsely! Many breakpoint will slow down the handling during creation.

                  • The "double T" icon is a switch, which enables/disables different text styling at each breakpoint (font, color, size, bold, …) It doesn’t allow you to change the text (wording) itself. If you need this, hide the text box in one breakpoint and place a new one with different wording, which you hide in other breakpoints. To do this, choose the according command within the context menu (right click onto the element.)

                  • "Trigger on top" means, that the trigger element are visible, if you place them "onto" the target. If you don’t choose this option, you can hide the triggers behind the target area.

                  1 person found this helpful
                  • 6. Re: pin to the right in design mode doesn´t show in preview mode
                    fotoroeder Adobe Community Professional

                    I finally got it.

                    First: you are right, not to take too many breakpoints. It takes too much time (I did it now only for the landing page, the other pages will start at normal 960. I use thumbs and on click fullscreen images, so this should be OK).

                     

                    Since my beginning I struggled with footers (as you may see on large views). I checked (footer immer unten) but it seems, I have a scrolling effect to the type layer and no scrolling effect to the background frame.

                     

                    And by redirecting elements from an ext HD, I produces an issue with my sub navigation buttons, which should be black in the normal state and yellow on hover.

                     

                    This must be done tomorrow.

                     

                    I realized, that resizing the window forces me to reload the page, otherwise it crashes everything - I read once, that only designers resize windows - no user in the world resizes browser windows (normally).

                     

                    I also have an issue with certain breakpoints - my so-called logo does not show on every view, although my logo is always set to "0" with its margins for scroll effects. When tipping a little up or down, my logo appears. But I don`t know, if this happens on certain devices like this or if it does only on my desktop computer.

                     

                    And BTW: fotografie-roeder.businesscatalyst.com

                    • 7. Re: pin to the right in design mode doesn´t show in preview mode
                      fotoroeder Adobe Community Professional

                      The footer issue is solved. Just keep an eye on layer z-order and it will work.

                      Anyway-thanks

                      Uwe