Page 1 of 1

How can I fix a CSS menu to the LH side of my page?

Posted: Sun May 05, 2019 10:16 am
by alan_sh
I have a site which has a fixed page header and has some pages with a css menu down the side. If you look at this page, you can see an example https://pennine2020.penninescouts.org.uk/resources.html

However, if the page is quite small vertically, when the user scrolls down, the menu on the side, scrolls up. What I'd like to do is keep it on the LH side exactly where it is if possible.

So, I added a layer, set the mode to be a docking layer on the left and put the menu inside it. Which nearly worked. When I do a preview, it has docked OK but to the top left, not the left. I tried various other options, but that is the only one which got anywhere near what I am after.

Is there a solution to this?

thanks

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Sun May 05, 2019 11:53 am
by Pablo
There are multiple menus on your page, to which one is this related?

Note that I cannot see what you have done exactly based on the HTML only.

Tip: if you ask for help please remove all non-relevant content so it's immediately clear where to look.

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Sun May 05, 2019 12:30 pm
by alan_sh
Sorry - it's the menu on the side, not the one on the top. and the link shows the site before I tried anything so you can see that the side menu just scrolls up if the page length isn't tall enough to accommodate all the text.

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Sun May 05, 2019 1:12 pm
by alan_sh
To clarify a bit, I was hoping for ideas. Is usinga layer underneath the menu the correct way? If not, what is? If it is, what parameters should I be using.

Cheers

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Sun May 05, 2019 1:31 pm
by Pablo
What is the ID of the menu?

Did you try a 'sticky' layer?

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Sun May 05, 2019 2:20 pm
by alan_sh
The id of the layer on the resources page is "CssMenu1".

Yes, I tried a sticky layer but that wants to go top left or centre left. if top left, it goes behind my header layer. If centre left it keeps moving and can partially go behind the header layer.

I want it to go left exactly (0,145) where the existing menu is at the side. An achored or docking (left) layer seems the closest, but it gets anchored to top left in both cases.

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Sun May 05, 2019 2:21 pm
by Pablo
With a sticky layer layer you can also specify an offset.

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Sun May 05, 2019 2:32 pm
by alan_sh
Perfect. Thank you.

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Tue May 07, 2019 12:32 pm
by alan_sh
Actually, not quite perfect. It does exactly what I asked, but not what I want.

What I want is for the menu to be underneath my fixed page header. What happens is that it appears at the LH side of the screen. If the screen is quite wide, the header is centred and the menu underneath is way over on the left.

Is there a way to make it appear where it is shown on the screen and still have it in a fixed location so it doesn't scroll up with the rest of the page?

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Tue May 07, 2019 1:54 pm
by Pablo
Maybe this will work?
in the sticky layer properties:
- enable 'Relative horizontal resizing'
- set the alignment to 'center'
- make the sticky layer the same width as the page header

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Tue May 07, 2019 2:19 pm
by alan_sh
That won't work because I already have text on the same level as the menu. Look here https://pennine2020.penninescouts.org.uk/training.html for an example.

If this can't be done, so be it.

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Tue May 07, 2019 3:54 pm
by Pablo
That won't work because I already have text on the same level as the menu.
Did you try?
What is the exact problem?

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Tue May 07, 2019 5:57 pm
by BaconFries
That won't work because I already have text on the same level as the menu
Without sounding rude...what do you expect! now if I understand what your asking correctly... If you want the menu to sit to the left and be below the menu above wont you have to reposition the text to do what your asking?

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Tue May 07, 2019 6:42 pm
by alan_sh
Gents,

I'm sorry I didn't explain it properly. Pablo, I did try it out and it put the layer across the whole page.

If you look at this page as an example https://pennine2020.penninescouts.org.u ... rding.html you will see a secondary menu (I've changed it to a set of buttons because I like the look). There's no text to adjust because I have that space (a sort of gutter area).

However, if I scroll down a long page (make the page less than full screen and you will see), the menu at the side scrolls off the top. I'd like to keep it where it is.

When I applied a layer, it all seemed to be OK until I noticed it was at the left of my screen and not underneath "Privacy". So, that was a non-starter for me. I can't think of any other way of doing what I want, so I may just leave it scrolling up.

If anyone has any good ideas, I'd be glad to hear them.

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Tue May 07, 2019 7:53 pm
by Pablo
It is difficult for me to know exactly where to look with so much content.
It would be easier to help you if you just made a demo with the relevant elements only.

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Wed May 08, 2019 9:06 am
by alan_sh
I'll see what I can do

Thanks

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Wed Jun 05, 2019 5:36 pm
by TREZA13
I have the same question my menu css is always on the left I will follow this post
thank you for your work

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Wed Jun 05, 2019 10:23 pm
by alan_sh
In the end I let it scroll up since, if the menu gets too long and the vertical page size is small, the bottom menu items won't display.

Alan

Re: How can I fix a CSS menu to the LH side of my page?

Posted: Mon Apr 06, 2020 1:22 pm
by TREZA13
thanks for everything with a lot of delay
merci pour tout avec beaucoup de retard