Section Behavior To Each Other

Design help General
1

hey ,
first of all, sorry about my english but i really need to get help with this issue.

my problem:

Header:
as you can see in my link - the “grafik typo möbel” and the “/ L” works very well. its responsive and it´s changing like it should, when you resize the browser window. it is holding its position on the top of the page. ( its in a section - in a div box with text in it, fixed positioned and the typo size is in % to get the responsivness)

First Project Below:
now i want to add my first project below with the heading “Sonderedition”. i made also a section - div box - text) ( it cannot be fixed positioned, because i want to scroll the projects below my header)

The Problem.
as you can see in the link the " Sonderedition " don´t act in the responsivness like my header. it´s changing its position. i want it to act parallel to my header. i want it that it has in every browser position the same distance to the line above.

in other words: i want the “sonderedition” to be

  1. responsive as it is
  2. able to scroll
  3. holding the exact distance until to my first breakpoint to my header “grafik, foto, möbel”

again ( it should act exactly like my header but below with a distance )

i hope you understand what i´m saying and i would be very glad about an answer.

heres the project.

best luki!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

@Tomas_Statter Ich wunsche mein Deutch were as exceptional as your English!

I’m wondering if something like this might work for you? It seems to work for me… allowing the second section to adjust to all screen sizes.

I’m also suggesting the top fixed nav bar have a white background with a high z-index. This will allow your sections to disappear underneath it as you scroll downward.

1st Section

  • Header Smart — set z-index to a high number so it layers on top of everything else (10 perhaps?)
  • Hea.Smartphone Que — set z-index same as above
  • Header Pc — Recommend setting background to white, and z-index to one less than above (9 for example)

Section 9

  • Set width to 100%

Div Block 21

  • Set to Relative
  • In the Spacing Panel (not the Position Panel), set left and right margins to Auto (this will center the div inside the screen)
  • Set top margin to give some distance between Sonderedition and top nav bar (I tried 30, looks good to me)
  • Width 98% (or whatever value you’d like to create some breathing space between edge of screen

H1 header 1 first

  • Set to Relative
  • Adjust margins if desired. Or leave blank
1 Like