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

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
alan_sh
 
 
Posts: 366
Joined: Tue Jan 01, 2019 5:50 pm

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

Post by alan_sh » Sun May 05, 2019 10:16 am

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

User avatar
Pablo
 
Posts: 16883
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Sun May 05, 2019 11:53 am

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.

alan_sh
 
 
Posts: 366
Joined: Tue Jan 01, 2019 5:50 pm

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

Post by alan_sh » Sun May 05, 2019 12:30 pm

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

alan_sh
 
 
Posts: 366
Joined: Tue Jan 01, 2019 5:50 pm

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

Post by alan_sh » Sun May 05, 2019 1:12 pm

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

User avatar
Pablo
 
Posts: 16883
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Sun May 05, 2019 1:31 pm

What is the ID of the menu?

Did you try a 'sticky' layer?

alan_sh
 
 
Posts: 366
Joined: Tue Jan 01, 2019 5:50 pm

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

Post by alan_sh » Sun May 05, 2019 2:20 pm

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

User avatar
Pablo
 
Posts: 16883
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Sun May 05, 2019 2:21 pm

With a sticky layer layer you can also specify an offset.

alan_sh
 
 
Posts: 366
Joined: Tue Jan 01, 2019 5:50 pm

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

Post by alan_sh » Sun May 05, 2019 2:32 pm

Perfect. Thank you.

Alan

alan_sh
 
 
Posts: 366
Joined: Tue Jan 01, 2019 5:50 pm

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

Post by alan_sh » Tue May 07, 2019 12:32 pm

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

User avatar
Pablo
 
Posts: 16883
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Tue May 07, 2019 1:54 pm

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

alan_sh
 
 
Posts: 366
Joined: Tue Jan 01, 2019 5:50 pm

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

Post by alan_sh » Tue May 07, 2019 2:19 pm

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

User avatar
Pablo
 
Posts: 16883
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Tue May 07, 2019 3:54 pm

That won't work because I already have text on the same level as the menu.
Did you try?
What is the exact problem?

User avatar
BaconFries
 
 
Posts: 4519
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by BaconFries » Tue May 07, 2019 5:57 pm

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?

alan_sh
 
 
Posts: 366
Joined: Tue Jan 01, 2019 5:50 pm

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

Post by alan_sh » Tue May 07, 2019 6:42 pm

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

User avatar
Pablo
 
Posts: 16883
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

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

Post by Pablo » Tue May 07, 2019 7:53 pm

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.

Post Reply