Page 1 of 1

How can I get my menu to stay visible when the page scrolls??

Posted: Sat Jul 13, 2019 10:10 pm
by alan_sh
I have a layout grid with position as "header(fixed" and that does really well - staying at the top of the page when the page scrolls up. It is filled with 3 images all nicely centred.

I also have a CSS menu just underneath, also centred. But I want that to stay visible (always on top?) when the page scrolls and I can't seem to find any way of doing it.

I've created a sample project with two pages on. One, the index page, which is how I would like it. The second one, I put the menu into the layout grid in the centre grid and it looks OK in WB15, but in a preview, the header shoots up and to the right in default view, pushing the image off centre. Interestingly, the other breakpoints all look OK.

So, either I have found a bug or I am not doing it right.

Can anyone advise me?

My sample project is here https://www.dropbox.com/s/kaxc0e6nt9r67 ... t.zip?dl=0

thanks

Alan

Re: How can I get my menu to stay visible when the page scrolls??

Posted: Sun Jul 14, 2019 7:02 am
by Pablo
The element inside a layout grid are floating. So, they are place next to each other unless is no space in which case the element will wrap to the next line.

So, in design mode the CSS menu is below the logo, because there is no space at the left of the logo, but as soon as you make the page wider it will float to the right of the logo.

To prevent this you can (for example) insert a line (set to full width) between the logo and menu so the menu will be forced to a new line.
or set the logo to full width and the max-width to 528.

Re: How can I get my menu to stay visible when the page scrolls??

Posted: Mon Jul 15, 2019 8:36 pm
by alan_sh
Thanks.

I couldn't get the first option to work, but the second one was fine.

Alan