Skip to main content

CSS to Enlarge the Logo

  • February 7, 2023
  • 5 replies
  • 123 views

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!

Did this post help you find an answer to your question?

5 replies

Bfarkas
Hero III
Forum|alt.badge.img+5
  • Hero III
  • 3582 replies
  • March 6, 2023

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
Hero III
Forum|alt.badge.img+7
  • Hero III
  • 896 replies
  • March 6, 2023

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

 


  • Author
  • Novice I
  • 2 replies
  • March 6, 2023

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
Hero III
Forum|alt.badge.img+5
  • Hero III
  • 3582 replies
  • March 6, 2023
mark.brumley wrote:

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. 


  • Newcomer
  • 2 replies
  • June 11, 2024

In addition to Bfarkas’s

mark.brumley wrote:

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

 


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings