CODEWITHSUNDEEP
css
origin-ale.it
origin-ale.it

Reputation: 35

Different header positioning between desktop and mobile

I'm doing custom CSS for a client who runs Avada in his WP site.
He wants the header to be at the bottom on desktop, but at the top on mobile.

I've placed the header correctly on desktop with:

.fusion-header-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 76px;
}

Is it possibile to put it on top, on mobile, using only CSS? If it helps, with inspect element I've seen that the header has an z-index: 5.

Upvotes: 1

Views: 518

Answers (2)

Amir Nassal
Amir Nassal

Reputation: 441

Since your code worked on desktop, then you can do the same but with "top" attribute, or with "Static" property for mobile, using CSS media queries:

@media(max-width: 767px) {
   .fusion-header-wrapper {
      position: static;
      /* static is the default property */
   }
   /* OR */
   .fusion-header-wrapper {
      top: 0;
   }
}

Upvotes: 2

Kirti Chaturvedi
Kirti Chaturvedi

Reputation: 1325

you can use media query for same 

@media only screen and (min-width: 700px){ top:0}

Upvotes: 0

Related Questions