Position fixed is not working in any browser

Question

I want the header div class getHeaderTopFixed to be static. For that I have applied the below styles

box-shadow: gray 0px 0px 5px !important; 
position: fixed; 
top: 0px; 
width: 100%; 
z-index: 9000;

But is not working. Need suggestions on fixing this issue.

refer this:-https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header — Mr. Roshan, Jun 29 '18 at 07:21
Please go read [ask] and [mcve], and edit your question accordingly. — CBroe, Jun 29 '18 at 07:31

score 0 · Answer 1 · edited Jun 29 '18 at 07:29

0

please add this to your css you can use z-index according to you.

#header {position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index:999!important;
}

edited Jun 29 '18 at 07:29

IiroP

answered Jun 29 '18 at 07:25

Sumit Kumar

score 0 · Answer 2 · answered Jun 29 '18 at 07:25

0

try this css

  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;

answered Jun 29 '18 at 07:25

Joseph Stalin

please remove your `base.css`. put this css alone. will work fine. TESTED OK. – Joseph Stalin Jun 29 '18 at 07:27
removing base.css entirely collapse design of our site..Is there any other solution to fix this issue without removing base.css? – Arul Mani Jun 29 '18 at 10:06
okay i'll give you a short work. check line no:6311 of base.css and remove the following code `#header { /* position: relative; */ } ` this is enough. no need to put any code. this will solve the problem. don't forget to mark this as answer. cheers – Joseph Stalin Jun 29 '18 at 10:11
we made #header { /* position: relative; */ } in the base.css but still issue is not resolved. – Arul Mani Jun 29 '18 at 11:27
then replace the header css with above css and try – Joseph Stalin Jun 29 '18 at 11:28
it seems like the header is fixed – Joseph Stalin Jun 29 '18 at 11:29

score 0 · Accepted Answer · answered Jun 29 '18 at 07:45

0

This is due to transform: translate3d(0, 0, 0); on the parent <div class="off-canvas panelwrap" role="panel-wrap">. Take a look here to fix problem : 'transform3d' not working with position: fixed children

answered Jun 29 '18 at 07:45

We made [role="panel-wrap"] {transform: unset !important;} and this work for us. – Arul Mani Jun 29 '18 at 11:25

3 Answers3