Header Slider Title Position & Mobile Menu

Hello,
I have two questions:

  1. How can I change the vertical position of the header slider title? I’d like my message shifted towards the top of my header slider. I’ve also noticed on mobile devices the header slider title sits lower (bottom) than on desktop (middle). I’d like the title to sit about 1/4 of the height from the top on desktop and mobile.

  2. How do I get a menu displayed for mobile? Currently there is no drop down menu on my mobile version of the website.

Website: http://www.nopulp.ca/

Thank you

Dear Richard,

Thank you for reaching out to us here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?


@media only screen and (min-width:992px){
  
  .slide-inner {
    top: calc(25% + 95px);
    top: -moz-calc(25% + 95px);
    top: -webkit-calc(25% + 95px);
    -webkit-transform: unset !important;
    -moz-transform: unset !important;
    -ms-transform: unset !important;
    -o-transform: unset !important;
    transform: unset !important;    
  }  
  
}

.slide-inner {
  top: calc(25% + 70px);
  top: -moz-calc(25% + 70px);
  top: -webkit-calc(25% + 70px);
  -webkit-transform: unset !important;
  -moz-transform: unset !important;
  -ms-transform: unset !important;
  -o-transform: unset !important;
  transform: unset !important;
}

@media only screen and (max-width: 1024px) {
 
  .btn-menu{
    display: block;
  }
  
}  

Adjust the values accordingly to get the proper positioning of the slide title.

Regards,
Kharis

Exactly what I was looking for, thank you!

Hi,

I have the same concern but I want the slider title position lowered instead of placing it higher.
In my desktop its ok, however for mobile- the title went too high and already in line with the menu.

This happened after I activated the header contact info.

Refer to here

Please wrap the following custom CSS code you applied


.slide-inner {
  top: calc(25% + 70px);
  top: -moz-calc(25% + 70px);
  top: -webkit-calc(25% + 70px);
  -webkit-transform: unset !important;
  -moz-transform: unset !important;
  -ms-transform: unset !important;
  -o-transform: unset !important;
  transform: unset !important;
}

with @media only screen and (min-width:992px){ … }. So it will look like this:


@media only screen and (min-width:992px){
  .slide-inner {
    top: calc(25% + 70px);
    top: -moz-calc(25% + 70px);
    top: -webkit-calc(25% + 70px);
    -webkit-transform: unset !important;
    -moz-transform: unset !important;
    -ms-transform: unset !important;
    -o-transform: unset !important;
    transform: unset !important;
  }
}

Regards,
Kharis

Hi Kharis,

Thank you for your immediate reply.
In desktop, the css code works to change the position of the header title.
But nothing changes for mobile.here

Hello there,

Thank you for the followup!

Try adding this code and let me know how it works for you.


@media only screen and (max-width:991px){
  
  .slide-inner.text-slider-stopped {
    top: 180px !important;
    -webkit-transform: unset !important;
    -moz-transform: unset !important;
    -ms-transform: unset !important;
    -o-transform: unset !important;
    transform: unset !important;  
  }    
  
}

@media only screen and (max-width:767px){

  .slide-inner.text-slider-stopped {
    top: 250px !important;
  } 
  
}  

Regards,
Kharis

Thanks Kharis,

Issue resolved.

I am glad it is working for you at this time! Please let us know if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,

Thanks for your great help as always! I also want to move the slider title. Instead of moving it upper, I want to move it a little bit lower only in the desktop screen. I applied your CSS code and change the “top” to “bottom”. But I found that the degree is too much. It is too low. I tried to adjust the % to a lower percentage and the px to a smaller number inside the code, but nothing is gonna be changed.Pet Sitting Diary is my website. Could you help have a look and change the CSS code for me?

Hello there,

It seems like you have been able to manage it by applying the following custom CSS code:


.slide-inner {
  bottom: calc(25% + 70px);
  bottom: -moz-calc(25% + 70px);
  bottom: -webkit-calc(25% + 70px);
  -webkit-transform: unset !important;
  -moz-transform: unset !important;
  -ms-transform: unset !important;
  -o-transform: unset !important;
  transform: unset !important;
}


To tell the web browser executes that code only on desktop screen, you should wrap it with media query. The final code will look like this:


@media only screen and (min-width:1025px){
  
  .slide-inner {
    bottom: calc(25% + 70px);
    bottom: -moz-calc(25% + 70px);
    bottom: -webkit-calc(25% + 70px);
    -webkit-transform: unset !important;
    -moz-transform: unset !important;
    -ms-transform: unset !important;
    -o-transform: unset !important;
    transform: unset !important;
  }

}

Regards,
Kharis

I don’t know how to make it works. Although I want to move the header slider lower, it is too low for me. So I changed your CSS to 20%+50px for all three settings. But it seems not working. Could you please take a look at petsittingdiary.com?

Hello there,

Please try this one:


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

  .slide-inner {
      top: auto !important;
      bottom: calc(20% + 50px) !important;
      bottom: -moz-calc(20% + 50px) !important;
      bottom: -webkit-calc(20% + 50px) !important;
      -webkit-transform: unset !important;
      -moz-transform: unset !important;
      -ms-transform: unset !important;
      -o-transform: unset !important;
      transform: unset !important;
  }  
  
}

Regards,
Kharis