Struggling with the Header logo size

[castlepr]

Hope someone can help. My logo at the default size (320 x 120) in Monochrome Pro looks awful and I am trying to make it bigger (400 x 163). The menu runs underneath it and it all just looks wrong.

https://migglet.co.uk

All I can think of (other than removing the logo and displaying at the top of every page) is to make it bigger, but i’m struggling to do this.

This is what I’ve changed . . .

CSS

.header-image .title-area {
height: 163px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
padding: 0;
width: 400px;
}

.header-image .site-title > a {
background-size: contain !important;
background-position: left center !important;
float: left;
min-height: 163px;
width: 100%;
}

PHP

// Add support for custom header.
add_theme_support( 'custom-header', array(
'width' => 400,
'height' => 163,
'header-selector' => '.site-title a',
'header-text' => false,
'flex-height' => true,
'flex-width' => true,
) );

Also, is there any way of stopping the menu running under the logo?

Thanks in advance for any help/tips!

https://migglet.co.uk

[castlepr]

Can anyone advise on what is wrong with the code above?

Thanks

[MikeB2]

You need to change couple of lines in your code.

Change background-position: left center !important;
to
background-position: top center !important;
On your site, the min-height is set to 50px. Once you change the position to top the 163px min-height should work.

[castlepr]

Hi Mike,

Many thanks for taking the time to reply!

Unfortunately, the code change doesn’t seem to have worked for me. I’ve changed the left center to top center, and also the float from left to top, but still seeing the logo compressed to the original small size. The logo is correctly uploaded at 400px x 163px.

.header-image .site-title > a {
background-size: contain !important;
background-position: top center !important;
float: top;
min-height: 163px;
width: 100%;

[Author]

Posts