Tell us what’s happening:
I’m having problems with my fixed header, specially because I want it centered and changing size depending on the screen. And exactly when I change the position: to ‘fixed’ the size changes and the position changes and I don’t know why.
Please help!
Your code so far
in codepe please look for this
Newincome/pen/vvMjmr?editors=1100#0
That is the ending part of a CODEPEN link, there is the code, because it didn’t let me post my topic whith the whole code nor links.
Please Help!!
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36.
Setting position: fixed; and margin: 0px 1%; worked for me, since all your sections have 98% width.
The fixed position is relative to your screen, so I guess that is why it won’t be centered by the body’s text-align: center;
/Z-Index Only Works on positioned elements (absolute, relative or fixed)/
header nav { /* It has to be in the NAV, not the Header*/
background: radial-gradient(hsl(160, 61%, 47%), hsl(160, 61%, 59%), hsl(160, 61%, 47%));
overflow: hidden;
position: fixed;
width: 90%; /* !!! I have to re-define the WIDTH*/
z-index: 99;
}
/* ***** ***** ***** ***** ***** ***** ***** ***** *****
For the FIXED position, I found # things to be set:
1st - and most important is!!!: The POSITION: Fixed; property has to be used
inside the NAAAAAAV!! Not the Header.!!!
2nd - the WIDTH has to be reee-DEFINED!!
AND I THINK T H A T I S IIIIIIIIIIIIIIIIIIIIIIIIIIIIT !!!
***** ***** ***** ***** ***** ***** ***** ***** ***** */
My now next issue is that by changing the position of the nav element, my next element gets changes too. So I’ve still work to do there. And it also gave me an issue on Full-Screen, but I don’t think that’ll be a biggie. Hope I’ll finish it quicker now.
Thanks again!
