Changing Header Size

Hi,

thank You a lot for using Asagi!
The premium version has padding function for this in the customizer. You can add bigger padding and make it larger.
However You can add this padding manually to the free version with this CSS:

.inside-header {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 25px;
padding-left: 10px;
}

I hope this is what You need! Have a nice day!

Wow thanks the CSS worked great! I also used the premium version functions and it works there too. I happened to check the tablet and mobile versions, and I think I might needs some CSS there.

In tablet and mobile views, the extra padding becomes white space above the header (most white space in the mobile view). Is there any CSS to just fit the header so it fits whatever version it’s in?

I want to tell you how great your theme is — easy to use and the most customization in the premium version I’ve found (after 3 days of scouring WP themes). I left a review with all the details that I like.

Also I may want to use the system Title and Tagline text, since it looks so nice. But it doesn’t seem to shrink with the size of the screen. (The mobile view is off.)

Again thanks!

Hi,

thank You a lot for Your review! It helps a lot!

I think the easiest way to fix the first issue, if You change the background image size to cover. In the customizer go to Background images-> Header section and change the size to cover.
Yes, You need additional CSS if You want different padding on tablet or mobile. Maybe You can try this with Your own numbers:

@media (max-width: 768px) {
.inside-header {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 25px;
padding-left: 10px;
}
}

You can add different font size values at some fonts for mobile. In the customizer at typography-> header section You can change the site title size and there is a mobile icon above that. If You click on the icon You can add different value.

I hope this is what You need. Have a nice day!

Thanks for the feedback. I’m so glad you’re able to help me with this.

I had some time to experiment with the padding and settings.

With the header set to cover, I can fit the header well in all 3 views using padding function (but this requires different padding settings for each view).

So I set the padding settings to view the desktop header, and cut and pasted the CSS you have me to set the mobile padding, but for some reason it didn’t work. I changed the numbers for the CSS paddings settings, but still it didn’t affect the mobile or tablet padding.

Is there some different CSS to set the padding, or maybe CSS for the desktop and tablet views? Or would it be easier to set some time of “shrink to fit” function

Thanks so much!

Actually when I looked at my actual cell phone (android), your CSS basically works on various cell browsers, just cutting off about 1/8 on each side (even if I set the padding). On another phone I have it still works, just taking off a little bit more. So I’ll center my imagery a little bit more in the picture.

It appears that the WP Customizer phone representation for cell phones isn’t accurate.

But if there’s any chance you have some simple CSS that would allow the header to shrink to fit, let me know. That would be the best fit.

Thanks.

Hi,

it is little bit difficult to find a perfect solution in this issue.
In this case, You can only setup the size of the header with the paddings and the image will always tries to cover that area. Every devices have a little bit different sizes (media width), so the design looks a little bit different on every device.

To solve this You can add the last CSS more than once with different media width. Here is an example:

@media (max-width: 967px) {
.inside-header {
padding-top: 70px;
padding-right: 30px;
padding-bottom: 75px;
padding-left: 30px;
}
}

@media (max-width: 768px) {
.inside-header {
padding-top: 40px;
padding-right: 20px;
padding-bottom: 45px;
padding-left: 20px;
}
}

@media (max-width: 400px) {
.inside-header {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 25px;
padding-left: 10px;
}
}

As You can see the media width and padding sizes are different in the code. You can add different values for smaller and smaller displays.
I hope it helps a little to move on… Have a nice day!

Great thank you so much that works! I have seen people struggle so much across so many themes to try to solve this, so I’m glad you can help me.

And I just want to say that the pictures you use for your theme are really beautiful and I am considering using a few.

I also noticed your account system was great — it automatically sends me an email with an account in case I ever want to set one up. Can you tell me what plug in or program you are using for this?

Thanks again!

——-

Here are some of my notes for future reference in case it helps anyone else and so I don’t lose them:

If you want to make a menu taller or shorter, you can do so for both desktop and mobile in Layout -> Primary Navigation -> Menu Item Height. Click the mobile icon to set mobile pixel height. (The Primary Menu is the one beneath the header.)

If you want to turn on or off the top menu, called Secondary Menu (that sits above the header), go to: Menu > View all locations > Secondary Menu (leave at -Select- for off, or select one of the menus to turn on)

And here’s the code I used with a narrow banner (the Layout -> Header – > padding set to: 125,5,20,5):

@media (max-width: 967px) {
.inside-header {
padding-top: 120px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
}
}

@media (max-width: 768px) {
.inside-header {
padding-top:70px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
}

@media (max-width: 400px) {
.inside-header {
padding-top: 20px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
}

• This reply was modified 4 years, 7 months ago by helo4444.