Css for moving header text and header for mobile

Sydney
#1

Hello,

I’m a novice at this so please forgive my ignorance. My site header text needs to be lowered slightly for my pc view but the header image needs to be lowered for mobile in landscape since it’s being cutoff. Is there some code I can add to achieve that? I tried searching the forums, but it looks like it’s not a one size fits all solution.

www.get3home.com

Thank you! - Bryan

#2

Just to clarify, it seems to be the tablet that is cutting off the header slider image. thanks

#3

Hello there,

To prevent the header bar overlays the main slide image, you can add the following custom CSS code:


@media only screen and (max-width:1024px){
  
  .site-header,
  .site-header.fixed{
    position: relative !important;
  }
  
}

Insert it into Appearance > Customize > Additional CSS. If your site doesn’t support it yet, alternatively you can use the Simple Custom CSS plugin.

> My site header text needs to be lowered slightly for my pc view

Try adding this one:


@media only screen and (min-width:1025px){

  .slide-inner {
      -webkit-transform: translateY(-20%);
      -moz-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
      -o-transform: translateY(-20%);
      transform: translateY(-20%);
  }
  
}

The default value was set to -50%. Adjust it accordingly.

I hope this reply helps.

Regards,
Kharis

#4

Outstanding! Thank you for the excellent support Kharis, that resolved it. - Bryan

#5

Hello there,

Great! it helped.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, could you please rate our Sydney theme here:https://wordpress.org/support/view/theme-reviews/sydney#postform? We would highly appreciate it if you do so.

Regards,
Kharis

#6

Hi Kharis,

@media only screen and (min-width:1025px){

.slide-inner {
-webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
-ms-transform: translateY(-20%);
-o-transform: translateY(-20%);
transform: translateY(-20%);
}

}

The above code works for bringing down the Slider text and sub-title… but i want to move it to the left… Can you pls help here…

#7

Hi Kharis,

I tried this and it worked…

@media only screen and (min-width:1025px){
.slide-inner{
top: 25% !important;
-webkit-transform: translateX(-18%);
-moz-transform: translateX(-18%);
-ms-transform: translateX(-18%);
-o-transform: translateX(-18%);
transform: translateX(-18%);
}

#8

Great! You figured it out.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis