Menu teething troubles

Firstly, congratulations on b6, love the addition of the hamburger menu. I did expect to have a few problems applying it, which I had.
I understand the options of ‘relative’, ‘absolute’ and ‘fixed’, but I’ve been unable to make the latter two options work satisfactorily, as the menu either jumps to the top of the page, or hides whatever is in the box below.
In the preview image attached, there is a new problem where the menu items are offset. The subsequent hamburger menu show a different spacing where the offset occurs, so that might have something to do with the problem.
The links are:
http://www.grimsbylouthramblers.org.uk/absolute.html
http://www.grimsbylouthramblers.org.uk/fixed.html
http://www.grimsbylouthramblers.org.uk/relative.html

Forgot to attach in the previous message

Hi Geoff,

It’s worth reading or working through the Xway Menu Tutorial (available from our website), because this deals with how to make adjustments for absolute/fixed-position menus.

The offset might be caused by the fact that these menu items seem to have a double link applied. I’m not sure how that happened, but I would be interested to have a look at your document. Could you create a cut-down version and send it to us via support at softpress dot com? To create a cut-down document choose Duplicate from the File menu, and delete pages that aren’t needed from the duplicate document.

Actually, you needn’t worry about sending a document. I’ve found that I can create double links by copy/pasting text that already contains a link. You might have done that if you copied from a previous navigation box and pasted into the menu.

To fix this:

  1. Select the menu items that are offset
  2. Choose Remove Links from the Format menu
  3. Reapply the links

Thanks for reporting this!

Thanks Jeremy – I’ve removed the offset problem.
Regarding the absolute/fixed menus, on one of my websites where the menu box is at the top of the page, some padding on the pagediv works well, but presumably, where the menu box sits beneath a header box, containing a logo etc, relative is the only workable option, otherwise the menu jumps above the header box. I’ve tried placing it within the header box, but that doesn’t work. I’ve also tried giving a fixed position to the header box, but that produces some strange results.
Thanks
Geoff

Hi Geoff, fixed-position menus probably look better at the top of the screen, but you can use absolute position in other situations. One trick is to delete the top (and maybe also the left) offsets of an absolute-positioned menu. This is what we suggest doing in the Xway Menu Tutorial (see Adding a menu to the Ambient document, pages 13-14). If a box has absolute (or fixed) position but doesn’t have a vertical (top/bottom) and/or horizontal (left/right) offset, it is positioned according to where it is in the flow (i.e. where it would be if it had relative position).

If you’re happy with relative position, that’s also fine - but it has the effect of pushing down other content when a hamburger menu is opened. If you use absolute or fixed position, the menu will open in front of other content.

I’ve just finished adding the new menus to my fourth site. All have the same stile and the first three work fine, however www.louthjazzclub.org.uk behaves differently in that the hamburger menu is permanently expanded, even on a 21" screen where it isn’t necessary.



It’s worth noting that when I interchange menus from one site to another on a test page, faulty Jazz menus behave correctly elsewhere, and ‘correct’ menus pick up the fault on the Jazz website.
Geoff

Hi Geoff,

Your screenshots show that there is a missing CSS file. The way that this menu is displayed is what happens when a menu (which is a list in HTML) is displayed without CSS styling.

Check that you have uploaded everything that is in your Site folder. The simplest way to do this is to use a third-party app (Cyberduck, Transmit etc.) to synchronise the local Site folder with your online Site folder. Most upload apps have a Synchronize function (e.g. File/Synchronize… in Cyberduck).

CSS files for menus are in a css subfolder within your Site folder.

Thanks Jeremy. I should h ave remembered that!
Geoff

That appearance means that either the style sheet or the script for the menu isn’t loading. This can often be because it didn’t get uploaded to the server along with the rest of the files. That’s where I’d start looking. If you used your SFTP application to “synchronize” the site files, try uploading everything indiscriminately, overwriting everything on the server.

Walter

Thanks, all sorted now, but just noticed a new problem with the slideshow on the Home page. Haven’t had time to investigate yet.

Geoff