For Crisp White skin, the default logo block height is 60px, and the default menu block height is 60px; the total height of the header block is 140px (as regards the desktop view).
If you want to use a bigger logo image, you will need to increase the height of these blocks, respectively.
The height of 60px for the logo is not a random value. This way, we ensure that the top menu is not too extensive and does not eat up too much space, which otherwise could have been used to display relevant content to your customers.
If you need to increase the height of the logo, please consider the possibility of making your logo image fit into 60px height. It will probably be an overall better solution for the look of your store.
Before deploying the changes, ensure that they do not interfere with the modifications applied via the Custom CSS feature. Check the Custom CSS section of the store Admin area for any possible code added.
X-Cart 5.5.x: See Design > Customization, Custom CSS tab.
X-Cart 5.4.x and earlier: See Look & Feel > Custom CSS & JS.
For example, let us add 20px to the height of the logo and menu blocks and add 40px to the height of the header block. Here is the code that makes this possible. Add it to your “Custom CSS” section:
/* DESKTOP VIEW */
/* Increase total height of header block +40px */
@media (min-width: 992px) {
#header-area:after {
margin-top: 180px;
}
}
/* Increase logo and menu blocks height +20px */
@media (min-width: 992px) {
#logo, .company-logo {
height: 80px;
}
#header-bar {
height: 80px;
}
}
.header-right-bar {
height: 80px;
}
/* Increase logo image height +20px */
#logo img, .company-logo img {
max-height: 60px;
}
/* Adjust paddings for menu items */
/* Original padding: 20px 17px; */
.navbar-nav>li>a, .navbar-nav>li>span {
padding: 30px 17px 25px 17px;
}
As regards the mobile view, let us increase the height of the header and logo blocks, too (by adding +20px). Here is how we can do it:
/* MOBILE VIEW */
/* Increase header block height +20px */
@media (max-width: 991px) {
#header-area:after {
margin-top: 100px;
}
}
/* Increase logo block height +20px */
.mobile_header ul.nav-pills {
height: 80px;
}
/* Adjust paddings for menu items */
/* Original padding: 20px 10px; */
.mobile_header .nav .mobile_header-slidebar a {
padding: 30px 10px;
}
/* Increase logo image height +20px */
.mobile_header .nav .mobile_header-logo #logo img, .mobile_header .nav .mobile_header-logo .company-logo img {
max-height: 80px;
}
Related pages: