How to Decrease Header Size in blogger


#1

Hello Everyone,

Hope you guys are doing great.

Does anyone know how to decrease / resize header size in blogger. It is just text header not image header. Tried to search on the internet but could not find any solution.

Any help is appreciated and thanks in Advance.

Regards, Rahsin


#2

Please provide the url! and do you want to resize the header text or header


#3

Its header not header text. The url is as400training.blogspot.in


#4

add this css

header {
    width: 1100px; /* adjust 1100px according to your needs */ 
    height: 150px;/* adjust 150px according to your needs */ 

}

#5

Bro i checked it out using chrome inspect element tool and it is not working instead the header is changing its position. Now what do you think which Css we should apply ?? :smiley:


#6

Hmm I see @ngtechzone

Try adding this css

by this we are making it small as well as not moving it from its position

header {
    padding: 150px;
    margin-top: -150px;
    margin-bottom: -150px;
}

#7

Damn It Didn’t work , the position is still same and the size is still same :confused:


#8

No worry man! Time to use some brain :slight_smile:

add this simple css and I am damn sure this will work

header {
/* adjust 0.8 to whatever you want ( 1 is normal size ) */ 
    transform: scale(0.8); /* for normal browsers*/ 
-webkit-transform: scale(0.8); /* for chrome and safari*/ 
-moz-transform: scale(0.8); /* for mozilla firefox */ 
}

#9

Awesome! How did i forget the transform Css Property?? Damn i was late then you but was thinking about it :smiley:


#10

hehehe! Very common property but very useful and @rahsin you gotta add that css before ]]></b:skin> and your blog has good content! keep it up :smiley:


#11

@Nafees, I tweaked the below code and it met my requirement partially.

header { padding: 100px; margin-top: -160px; margin-bottom: -150px; }

I am wondering how to move my vertical menu closer to Header text. Also can you tell me how to center search box? I can give you code for this menus and search box.

What is this padding do?

Thanks for all your help.


#12

For search box

#HTML4 .widget-content #search-box {
    margin-left: 10% !important;
    margin-top: 19px !important;
}

and vertical menu is a widget so you have to do some coding for that.but it will look weird as I experimented it. Anyways is header ok according to your needs now?


#13

@Nafees, you are man! Excellent search box code worked. There is much gap between menu and header text. Can we decrease that gap. Please help.


#14

Here you go

#menubor {
    margin-top: -22px !important;
}

#15

Awesome. Can you check the blog and please how it is? Any other changes to be made. What is your opinion on my blog. Any suggestions would be appreciated.