Tricky header / footer

[nblund]

Hi there,

1
The vertical name in the right (header) bar does not align top responsively. Instead I used a proximity: $el{padding-top: 3.1vw;}. But how do I make it align at top?

2
The same vertical name in the right (header) bar jumps down in viewport one the first text typing animation has occurred (before the second word animation starts). What have I done wrong?

3
Again, the vertical name in the right (header) bar - how would I make the two headlines align as a single row at smaller screen sizes? I have tried different css display solutions without luck.

4
The final question about that vertical name in the right (header) bar: I wish to obtain a color that will change subject to the background so it remains visible at darker background colors. I have tried to apply mix-blend-mode difference to the text element, the container, and the bar. But I don’t get a satisfactory result. Would you have any hints?

5
As part of the same header, the burger menu icon on blog pages, e.g. /affordable-housing-not-for-low-price/, starts right of its planned position, and then jumps into place upon scroll. What have I done wrong?

6
As part of the same header, the sticky bar at scroll on small screens required that I added css position:fixed to stick. But I wonder why it didn’t work. If you have a quick answer, please let me know. Otherwise don’t bother, it works now.

7
In the footer, I have added a right margin in the footer on large screens to visually align with the name that sticks top right. However, when I add margin-right: 6vw; a new underlying element appears with a white background (please see lower right corner of attached image). I would expect the white color to be my theme background color (and would like it to be that color). But that theme background is not white, so I don’t seem to identify that element. Can you help me identify, so that I can style it?
8
Finally, it is clear to me that the social buttons in the same footer makes scrolling a less pleasant experience (hard to get scrolling startet). When I remove them, the scrolling is smooth. Can you help me clarify why / what to do about it?

Thanks a lot.

[tristup]

Hi @nblund,

Thanks for reaching out.
I would request you provide any screenshot marked with the problem you are having. Please find the answer to the rest below. Please remember that we don’t offer any support to custom CSS or related issues.

7. If you add the margin right that space will be added, I would suggest you add the padding instead of margin.

8. The scrolling issue occurs due to the second scrollbar that appears on your website. Please remember that the double scrollbar appears only if some of the element is taller or similar in height to its container. In your case, the height of the Bar is set to the 3.55em, please set that value auto to get rid of this issue.

Hope it helps.
Thanks

[nblund]

Thanks very much for your help. There will be too much information to keep track of, so I will go ahead and list the issues related to the vertical text element in a new ticket. Hence, for this ticket only the following remains:

With regards to your answer cf 7, add the padding instead of the margin will not do the work, because that element with the white background (see attached image) should be style with the same background as in my right bar. So, very much appreciated if you can help with identifying that specific element.

Thanks.

[ruenel]

Hello @nblund,

The white space on the right side of your footer is actually coming from the Fixed Right Header.

If you just want to display a vertical logo to the right, you can simply add another Bar element in your header and rotate it by using the Effects module.

Hope this helps.