CSS to Enlarge the Logo

  • 7 February 2023
  • 5 replies
  • 105 views
M
Rank
Userlevel 1

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!

5 replies

Bfarkas
Rank
Userlevel 7
Badge +4

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.

gstager
Rank
Userlevel 7
Badge +6

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

 

Greg
M
Rank
Userlevel 1

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;
}

 

Bfarkas
Rank
Userlevel 7
Badge +4

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. 

K

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


Terms & ConditionsCookie settings