My post just showed the principle.

It seems you have the paragraphs in containers (say, containers-x), and those containers-x are being centred vertically by reference to the container (say, container-y) holding those containers-x. To centralise vertically a paragraph within a container-x, that container-x must be a Flex container and use the Flex setting Align > Items > Center.

Frank

Typed during your last post, Inger, but I think this may do the trick as long as the paragraphs have all padding and margins set to 0. Unfortunately the presets of paragraph margins can mess this up. FC

Apologies Inger and thanks for informing me about that.

Here is the link for the RSD file:

https://drive.google.com/file/d/1SY96nM … sp=sharing

Also, adjusting margins and padding will not help because I will need to adjust for all the 4 menu items so if I have 0 or 10 or 20 etc... I will still have the same problem when the screen width is reduced in that 1 item will occupy 2 rows first (Cancellation & Refund Policy) and then another item (About Neferium) will occupy 2 rows, while the first 2 items will always be 1 row. This means that the contents will not all be vertically centred relative to each other.

Hi Frank,

I have the container set to FLEX as you can see from the attached image. As mentioned before, if I increase the height of the container to, say, 200, the paragraph containers are indeed vertically centred. But what I'm after is for the contents of the paragraph containers to be vertically centred, not the paragraph containers.

I can adjust the height of the main container to be the same height of paragraph containers, or have the container height to be 50 say, and then use padding/margins to vertically centre the paragraph containers but my issue lies with the contents of the paragraph containers themselves.

It is necessary to distinguish between a paragraph element, and a container in which one may put a paragraph element. In SD a paragraph element is not a container. If each paragraph element has its top and bottom margin and padding settings set to zero, and it is put in a container with the Flex settings I mentioned, it should work.

Hi again Maz,

Got your project, and the solution is simple: remove the height from the four paragraphs, set it to 'auto'. Do that at the narrowest viewport.

I'd say change the class names of those paragraphs to one and the same for them all. Then if you change one, they will all change.
I would also suggest that you increase the font size a bit (e.g. 12px), it will be hard to read it on a mobile phone. If you increase the font size, then you may probably also spot the typo you have in your site name (About NefArium)

Yes!

Thank you for that! It's now centred vertically and typo fixed!

Thank you Inger and Frank and Wayan... Maz

As a continuation of this, the bookmarks in the second sticky menu that I have defined (all in the index page) now move up to the first/top sticky menu and not the sticky menu that called them. This means that part of the text is now obscured by the second sticky menu.

Is there a setting that says bookmarks go 'up to' the sticky menu that called them?

You probably will have to declare how far from the "top" of the page you want the section(bookmark) to stop

You do this in the attributes of the trigger for that section(bookmark)

Custom
"data-offset+
value = ( no of pixels from where you want it to stop"

OR

You make the top menu (black background ) fixed to the top

then you make the second menu stick to the top

then you can make the fixed menu fade out when someone scrolls a defined number of pixel down the page, (which then gives the illusion that the second menu is over the top of the first menu,

then when a user scrolls back up a number of pixels the second menu scrolls down and the first menu fades back in fixed to the top

Of course there is still the problem of Mobile devices not being able to perform the "sticky" thingy any way co that's going to need more thinking about for mobile devices

I changed various attributes (there wasn't data offset but data off... and to see if I was on the right track, I changed all available attributes to 1000

There wasn't any change to the scrolling under the sticky menu...

When you say "value no of pixels from where you want it to stop" do you mean the pixel height from the top of the screen to where I want the scrolling to start (i.e. to disappear under the second sticky menu)?