How to reduce the logo & menu icon header space

Hi,

My weburl is Here

1.The homepage is loading very slow

2.please help me to reduce the slider image and logo size in mobile view.

3.please help me to remove unnecessary space in logo header section(in header area) in mobile view.

  • Please keep my message private.Many Thanks in advance.

Hello there,

> 1

There are many variables can be the reason of why your site loads slowly. Please read the codex. There are some plugins that will help to improve your site performance. One of them is W3 Total Cache. I’d recommend you to give it a try. Read this article for its tutorial.

> 2 & 3

Try adding the following custom CSS code into your site’s additional CSS option under Appearance > Customize > Additional CSS.


@media only screen and (max-width:1024px) {
  
  .site-logo {
    padding-top: 0;
  }
  
}

@media only screen and (max-width:991px) {
  
  .header-slider {
    height: calc(100vh - 240px) !important;
  }
  
}

Regards,
Kharis

> * Please keep my message private.Many Thanks in advance.

Unfortunately there is no option to change the thread visibility. Sorry. :frowning:

Regards,
Kharis

Thank you for your kind support.

#1.Regarding speed up the website, I’m using the w3 total cache plugin to sort them out.Could you please help me to remove nay unnecessary variable I have included in this website.

#2. Please check the slider text is sliding over the logo section(in desktop view ). How can we move both slider text & description(down), just next to the menu bar section.

#3. Slider size from the desktop view has reduced its height, Please help me to fix the slider image height as 550px

#4. How to remove the pages header image section in mobile view.

#5.Please check the mobile view of the weburl here, please help me to move all the slider text at the middle of the slider image.

Many Thanks in advance.

Hello there,

#1.

I am sorry, nothing we can do to assist you with it as it, as it goes beyond our support policy. We don’t provide site optimization service.

#2

Please apply this custom CSS code:


.slide-inner {
  -webkit-transform: unset;
  -moz-transform: unset;
  -ms-transform: unset;
  -o-transform: unset;
  transform: unset;  
}  


#3

It seems like the following custom CSS code applied.


.header-slider {
    height: 600px !important;
}

Are you OK with it? Or, maybe you want to change it to:


.header-slider {
    height: 550px !important;
}

#4

I am no sure. Sorry :frowning: Could you please take screenshot of it illustrating that header image section. For the image file itself, upload it to the free file hosting service like Google Drive or Dropbox, and then share its public link here.

#5

Try adding this code and adjust the value until you get it exactly be positioned at the middle.


@media only screen and (min-width:768px) and (max-width:1023px) {

  .slide-inner {
    top: 40%;
  }  
  
}

Regards,
Kharis