How to Customize Header Container Size

Support
#1

Hello I wanna ask how to custom my header container size? thanks

[details=Summary]
So my website Cerminjiwa.com header looks like Hereslife.ph [/details]

#2

Hi there,

You may use custom CSS for that. Please try this in X > Theme Options > CSS.

.x-navbar-inner .x-container.width, 
.x-topbar-inner.x-container.width {
    width: 92%;
    max-width: 1300px;
}

Please feel free to adjust the values in the code.

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

#3

Hi There,

Thanks for writing in! Did you mean the height of the container? You can click on the inspector on your Bar.

Then you can set those details.

Hope that helps.
Thanks!

#4

Thank you Jade for the help, It works for the width of the website, how about the height of the header & footer of the website? I can’t find any CSS code for the height when I inspect the header element on my website.

#5

Hello @mldarshana thanks for the help, but I mean I wanna change the height size of the container of the header & footer, but I can’t find any inspector bar on it.

#6

Hi there,

Apologies for the confusion, the suggestion by Dashana is meant for the Pro theme header so kindly disregard it.

As for the header and footer height, are you trying to increase the height of both or decrease it?

If you want to increase the height of the header, please try this CSS:

.x-navbar {
    padding-top: 15px;
    padding-bottom: 15px;
}

The above code will add a top and bottom padding for the header area thus increasing its height.

If you want to shorten the height of the header, you can set the navigation height instead through the Theme Options settings.

You can find it in X > Theme Options > Header > Navbar > Navbar Top Height (px). You may also use this option to increase the height of the navigation area.

As for the footer, there is a default top and bottom padding set to that area so to change the height, you can simply override it using this CSS:

.x-colophon.bottom {
    padding-top: 30px;
    padding-bottom: 30px;
}

Feel free to change the value of the top and bottom padding in the code.

Hope this helps.

#7

Thank you Jade, it works :grinning:

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.