I’m trying to recreate the same kind of menu that’s on the Softpress site. I’m able to draw a graphic box and set it to be ‘fixed in window’, which allows the menu to stay static and overlay items on the page when scrolled down.
However, when I’m drawing this graphic box (and inserting anything into it), it all becomes left aligned, which doesn’t really suit a range of window sizes.
On the Softpress site, the menu content is always centred, regardless of how big the window is expanded.
We did this using the following steps (Freeway Pro only):
Make sure the CSS Layout button in the toolbar is selected
Draw an HTML layer item anywhere on the page
Move it to the top left of the page (0px from top and left)
Set its width to 100% and the height to the desired height of the menu
Make the item Fixed in Window (for those that don’t know, it’s the pulldown under the Name/ID field in the Inspector)
Double click inside the item and go to Insert>HTML Item
Change the width of the new item so that it fills the parent item (it needs to be a fixed pixel width)
Using the Align pulldown in the Measurements section of the Inspector, select Center. This is the same as choosing Auto from the Margin pulldown in the Dimensions section
Place your menu and any other items you want in the fixed header inside the fixed width child item
What you’re doing is creating a fixed in window (or pinned) item at the top of the page that stretches to fill the full width of the window. Inside of it is another item which automatically becomes fixed in window because of the first item and has a fixed width (that you define) to keep it centered. Anything inside it is fixed and also kept in the center of the window.
A couple of hints:
If you want the set color of the fixed header, you need to get at the first item, the one that stretches. To do this, either use the Item view in the Site Panel, or Command-Option Click in the design view to cycle through stacked items (so Command-Option Click to select the fixed item, then again to select the stretchy item).
If you use an inflow layout, you either need to add a margin or padding to the top of the first inflow item that is equal to the height of the fixed header. Otherwise the header will overlap the content in the first item, though this may of course be the desired effect.
I was able to create this menu successfully as well. However I haven’t figured out how the remaining of the page affect with the white, blue and grey back ground were obtained.
I am looking to have obtain a similar affect but I have a fixed page width. I attempted to have a flexible width to the page but then many of the items shifted to the left of the browser. Any advise on how that was created?