Menú right or left (Nav)

Is there an option to place the menu on the right or left side of the page?

Hi Grabusitja,

If you want to align the menu on the left or right (instead of centred), you can choose Left or Right from the Alignment popup in the Menu section of the Box Inspector.

But if you mean having the menu items arranged vertically at the side of the page, then no. Vertical navigation menus were more common when people didn’t use mobile devices to view websites.

What some developers do is put the Nav label on the left or right and when the screen gets smaller it is automatically placed on top.

You could use CSS markup to do that. I think the simplest way to do this in Xway would be to create a separate side navigation bar (just a nav box containing links), and set that to be hidden when the screen is narrower than a certain point. Conversely, you would set the menu to be hidden when the screen is wider than this point.

If you paste the following markup into the CSS Markup box in the Page Inspector, it will hide the menu when the screen is wider than 768px:

@media screen and (min-width: 768px)
{
   #menu { display: none }
}

This assumes that the menu ID is menu (this is the default ID that Xway uses for menus).

You would probably want to do this on a master page.

You could use flexbox layout to create the side navigation bar, and add similar CSS markup to hide this bar when the screen is narrower than 768px. Something like:

@media screen and (max-width: 767px)
{
   #sidebar { display: none }
}

(assuming the sidebar ID is sidebar)

Alternatively, you could set the display property for menu to be none by default, and change this to block when the screen is narrower than 768px (or some other breakpoint). This would allow you to combine the two media queries in the CSS markup. The next version of Xway will have direct support for display:none, but you can use Extended Properties to add it in the current version. Then you could use the following markup:

@media screen and (max-width: 767px)
{
   #menu { display: block }
   #sidebar { display: none }
}