We had a query from a customer using the Estate template. When they added submenus to the CSS menus at the top of the page, the submenus failed to appear on certain pages. This turned out to be a z-index issue: the menus were being displayed behind layer items that were placed immediately after the menu item on the home page, so they were hidden behind the layer items.
For anyone who is using the Estate template, or who has encountered similar issues with CSS menus, there is a simple solution:
Select the item to which the CSS Menus Action is applied (on a master page)
Select Extended from the Item menu
Add the following Name/Value attributes to
: position:relative z-index:99
What this does is to set the z-index (front-to-back position) of the menu item so that it appears in front of other items with a lower index.
Footnote: if the CSS Menus Action is applied to a layer item, you can change the z-index by choosing Bring Forward from the Item menu. You also shouldn’t add “position:relative” in this case. If the CSS Menus Action is applied to a CSS inflow item (as in the Estate template) it might also be unnecessary to add “position:relative” because Freeway normally adds this to CSS inflow items - in this case it has omitted it through a mistaken optimisation.
Jeremy
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Not sure if to add this on this thread or start a new one, but seeing as it directly relates to your post I’ll add it here.
I have exactly the problem you describe (but in FW6 as I need to keep using the fading slideshow action). Built using the inline method I have a css menu immediately above a fading slideshow. The problem arises when the sub menus disappear behind the slideshow. By checking/unchecking ‘css’ in the item pallet for the different items I can get the menus to appear in front of the slideshow but they disappear as soon as I move the mouse down to select them. I’ve tried changing the z-index of both items as above but it doesn’t appear to have any effect.
How do I get the css menu to appear in front of the fading slideshow?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Select the item to which the CSS Menus Action is applied (on a master page)
Select Extended from the Item menu
Add the following Name/Value attributes to
: position:relative z-index:99
What this does is to give the menu item a z-index that is greater than the z-index of other items on the page, which should cause it to appear in front of those items. It’s possible that you don’t need to add "position:relative”. Look at Freeway’s default output, and see if it is already there - in which case it doesn’t need to be added. (Alternatively, if the menu item is a layer rather than an inflow item, Freeway will output “position:absolute” - which doesn’t need to be changed.)
By checking/unchecking ‘css’ in the item pallet for the different items I can get the menus to appear in front of the slideshow but they disappear as soon as I move the mouse down to select them.
You hardly ever want to uncheck “css” in the Inspector palette - this creates some kind of table layout that won’t work properly with CSS menus.
I’ve tried changing the z-index of both items as above but it doesn’t appear to have any effect.
Make sure that CSS is checked for all items.
Don’t change the z-index of the fading slideshow. This should stay where it is in the z-index order (near the back)
The z-index to change is the item to which the CSS Menus Action has been applied. If you give this a high value, it should appear in front of other items that are on the page.
On the first page "Eton Livestock Appliances”, I can get the menus to display in front by selecting the "menu-strip” item and adding “z-index: 99” to
in "Item/Extended”. There’s no need to add “position:relative” because Freeway adds it automatically for this item.
However, this item isn’t connected with a master item. The way that you want to create CSS menus is to have a menu item (with the CSS Actions Action applied) on a master page. There is a CSS menu item on the master page, but it has been deleted from the instance page. It’s also a layer item, while the item on the non-master page is an inflow item. I think you can probably use either.
The reason for creating a CSS menu item on a master page is so you can edit it and your changes will appear on every page. That’s less work than having to make separate changes on every page.
So what I think you should do is to rework your site so there is a CSS Menus item on the master page and all the menu items on non-master pages derive from this item (you can tell that an item derives from a master item because it will have Use Master checkboxes in the Inspector palette). When you’ve got this working (apart from the problem of menus appearing behind another item) add “z-index:99” to
in "Item/Extended” for this master item. If you use an inflow item rather than a layer item, you might also need to add “position:relative” in “Item/Extended”.
Jeremy
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Thanks for that Jeremy, that worked. I’m not sure but it would appear the problem arose either because I was adding ‘relative’ to the div style or because I was applying the style to the wrong item.
In terms of the master page advice. I am aware of that. I normally build the site on non-master pages then, when I’m happy with the design, transfer elements to the relevant master pages.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
It’s also useful to try to repeat the problem in a new, blank document. Sometimes cached actions or other document-level issues can be exorcised in this way. Start with a new document, then use copy and paste to move one page from the damaged document to the new one. Publish, and see if the problem follows. Keep adding pages until it breaks. That can tell you a lot.
Walter
On Jan 15, 2019, at 11:34 AM, Jeremy Hughes email@hidden wrote:
Hi Matt,
It’s hard to guess without seeing your document - can you send a copy or cut-down version to support at softpress dot com?