Adjust Header Size

Hey guys,
as I am not able to find any topic regarding the adjustment of the header image in activello, I am writing you here. I am using my logo as a header image, but i like to get the overall image smaller. Trying to upload a smaller image ist not resulting in any change of the hight.

can you please tell me, where i can adjust the size of the header image in activello?

thanks,
andi

Hello there,

I hope you are doing well today.

You can use the following CSS code to reduce the height of the header by going to Appearance > Customize > Additional CSS and pasting it there.


/*Header size*/
.flexslider {
    height: 300px !important;
}

Best Regards,
Support

Hey,
thanks for getting back on that issue so fast. unfortunately it doesn´t work. I like to have the header 100px in height. sure I think I am able to adjust your 300px in my 100px. as I am posting the code in the additional css form, nothing is happening at all. no matter which hight i add.
any guesses what i can do?

best regards,
andreas

Hello there,

Thanks for the update.

Could you please provide a link to the page with the header you want to have changed so that I can create the CSS?

Best Regards,
Support

Hey,
super fast answer, thx a lot. my page is www.freiheit-internet.de and at the moment I am using a header which is 200px in hight. as i like to get a smaller head, I like to decrease the hight to 100 px. or better, in any size i might think will suit me.

thank you so much for your support, means a lot.

best regards,
andreas

Hey thee

From what i understand you want to decrease the area of the header where the logo is placed at this moment? if yes then try this css, it will remove extra padding from top and bottom of the logo:

#logo {
padding: 0px !important;
}

Let me know if this is what you wanted, additionally, you can decrease image size for more space

Hi,
thanks for the code. It helped a bit. the one thing I dont understand is, that all header images, regardless which size I upload, will be stretched or compressed to the particular header size. the recommended image size is stated with 400 x 200 px. I uploaded my logo with a hight of 100 px and it got stretched to the mentioned 200 px in hight.
Any chance to get the actual header image size displayed?

I will let the stretched logo in place, that you hopefully can see what I mean.

Thanks a lot for your patience.

best regards,
Andreas

Hello there,

I hope you are doing well today.

The best image size to use is 1920Wx550H because this allows the image to fit the wider side of screen sizes.

Best Regards,
Support

Hi,
thank yyou for your answer. that will be right, but I like to have an adjustable imagesize. So, not 550H, I like to customize the hight. at the moment I have a 100pxH image, but the theme is stretching it to 400x200px. any guess how I can customize the hight of the headerimage?

thanks a lot,
andreas

hi andreas

What do you mean in the customizable header? :slight_smile:
its really not necessary you just need to create one image with this size: 1920px*550px and place your logo/image, you can also choose different sizes by proportions should be kept, there is no necessary to add extra css codes when its possible to fix problem with this way

Hi Noda,
thanks for your answer. I get what you mean. As Ilike to have my header image just 100px in high, I uploaded an image which is just 100px high. activello is stretching this image to 200px. So,sure I can upload a header image of 1920x550px, but that will not be what I am looking for.
I want to have smaller header image, that the actual content is visable without scrolling too much. so therefore the header image needs to be like 100 px in hight or smaller. Uploading an image with 400x200px is fine, everything works like it should be. uploding an image with 400x100px means, activello is stretching the image to at least 200px in hight. It is the same with choosing an bigger image. I was uploading a 500x500px image, just for checking what activello is doing. same here, the picture got compressed to 200x200px. So, for me, whatever I try and do, every header image will be compressed or stretched to 200px in hight.
As I really like the theme and many thanks to you guys for programming it and having this brilliant support, I thought, if someone could know how to fix this, it must be you.

Hope there is still a chance to get my header image to 100px in hight :smiley:

big thanks,
andreas

Hello there,

Please try using theis CSS to have the header image remain at 100 px:


/*Header image height*/
.flexslider {
    height: 100px !important;
}

Best Regards,
Support

hello there,
unfortunately it did not worked out as hoped. every image i upload as header image will be cropped/increased to 400px x 200px. I really thank you for your support, but none of the mentioned solutions above will help me. really every image I upload (no matter what size) will be cropped/increased to 400x200px. I also checked if it will be possible to get the image at leased full width of the screen (as you see in the activello theme preview). Also here I haven´t found any solution.
Is there any chance to adjust the header imagesize?

thx guys

To adjust header logo image size please use the custom plugin shared in the following topic.

https://colorlibsupport.com/t/logo-uploads-fine-but-looks-blurry/

Hi Idlly Team,

I don’ know is this right submit for my query or not. But still I used this due to my query and topic is related to header image.

  1. Unable to three lines of menu in mobile view in white image, so how to change the colour of those three lines of menu which gets shrieked in mobile view.

  2. Front page image is not mobile responsive?

  3. Feature image in “Category” getting out of the box. And the same is goes with header image.

  4. Header image of blog is not mobile responsive, in addition to this I have used your below code for header image.

/increase header padding size/
#header .bottom-header.blog {
padding-top: 500px;
}

Kindly see the images for your ready reference and to give you pictorial view.

@ketanbhagwat This topic is created in Ativello theme forum and not in Illdy theme forums so to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/illdy/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

I cant understand the difference between length and width in this case…

Since this is an old ticket I will close this topic, anyone else with the same problem or question please start a new discussion :slight_smile: