Movable element to the side of a page eg the menu bar

[TimBox]

Hi All

Back again like a bad penny.
I have a reactive website and need to prevent the menu bar being obscured. If its placed on the left it is fine as its the right hand side that gets obscured first. But I want the Logo on the left and the menu bar on the right.

Is there a way to make the bar move in as the page gets smaller?


Thanks

Tim

[gwpriester]

I think what you are looking for is Sticky

Right click on the object then select Sticky/Stretchy.

Click Help in the menu for a full description of all the options.

[Initiostar]

I have a reactive website and need to prevent the menu bar being obscured. If its placed on the left it is fine as its the right hand side that gets obscured first. But I want the Logo on the left and the menu bar on the right. Is there a way to make the bar move in as the page gets smaller?

YES:

The logo on the left would be made sticky and placed just to the left of the page. Your menu can sit on the page to the right (in my examples the menu is in the middle, but this makes no difference).

You export with Scale-to-fit-Width and the page (including the menu bar) proportionally change with the browser/window size:

Examples:https://initiostar.co.uk/ > https://hypnosis-retreat.co.uk/

The transition takes you seamlessly from the desktop variant to a tablet/mobile variant with no overlapping and no loss of content. In the examples, the menu transitions from horizonal to vertical retaining the same style for consistency as the format moves from landscape to portrait.

Gary

[gwpriester]

To add to this, if you move the object off the screen and make the object sticky, then it will adhere to the edge of the screen. I have done this in the past and added a transparent rectangle to the left of the object so it is not right on the edge.

Depending on where the object is will determine where it sticks. This is why I suggested reading the Help file in the Sticky/Stretchy menu.

[TimBox]

Thanks as always for the great support

The menu is sticky already.

The issue is that just before it swaps to mobile its obscured. (image below)

I think I can resolve it by adding another size range eg tablet

Tim

[Acorn]

The simplest solution might be to enable Stretch to Fit width. Clan and simple.

A more complicated approach is to turn your NavBar into a responsive one (in an adaptive environment).
I tried with CSS with some success and limitations: CSS - Stretching Menu.xar

Acorn