Fixed header and responsive design

1

I am having an issue. I made a fixed header which functions properly,but i am having trouble with adjusting the position of the text underneath it. I made a text section which i moved about 150 pixels under the fixed header so that it can be seen under the header on my laptop viewport. But when i set the window size to the smallest size possible (extra small),it does not look so good because it seems too close to the header. I want to make it go lower,but if i made it lower by changing the class

.TEXTSECTION {
font-size:25px;
text-align:center;
top:150px; (from 150px to 200px)

then my textsection goes too low on the large screen.
Is there a way to address the

element relative to the placement of the fixed element? Could someone do a little digging in my code and give me any suggestions ? Thanks! :smiley:
2

Mmm… I think that using fixed navigation bars gives issues with the following elements in small devices. When you resize the device the nav bar turns in a column with 3 rows, and each row add “x” pixels, so its height has increased. The text still having 150px and then the nav bar overlaps the text… I´m not sure if this is the main problem, but I would use media queries and giving different values. It´s also true that I´m not an expert in bootstrap :joy: probably my solution is not the correct one.

Hope this helped you!!

1 Like