Skip to main content

Hi! I’m not too bad with CSS but I can’t figure out the code to enlarge the logo and the header that contains it. I have inspected the code and tried various things, but no luck, Can someone help me? Thanks!

The biggest issue with enlargening the logo is that it is within a defined container that impacts the entire header, so you need to adjust them as well which makes the upkeep pretty extensive. I do allow some basic changing in the CSS Configuration Wizard tool on Fark.Tools to try and simplify it a bit for you, but it is not perfect either depending on what size you are scaling too.


@mark.brumley - Have you tried the suggestion at this post?

 


Thank you for the reply. This works pretty well:

 

doc-layout-internal-header .internal-header-logo a {
height: 54px !important;
}
doc-layout-internal-header{
height: 4.25rem !important;
}

 


Thank you for the reply. This works pretty well:

 

doc-layout-internal-header .internal-header-logo a {
height: 54px !important;
}
doc-layout-internal-header{
height: 4.25rem !important;
}

 

Just be careful with looking at different screen sizes and things with the referential sizing types. Can push things around a bit. This one was by far the trickiest one to abstract for most users when building the initial CSS Wizard Tool. 


In addition to Bfarkas’s

Thank you for the reply. This works pretty well:

 

doc-layout-internal-header .internal-header-logo a {
height: 54px !important;
}
doc-layout-internal-header{
height: 4.25rem !important;
}

 

 

In addition to this answer, you may need to bit more spacing around your logo. The following may be helpful to add…

 

.internal-header-logo {
min-height:54px;
}

 


Reply