Increase logo size?


(Clever Moniker) #1

Can someone please help me figure out how to increase the size of the logo in the header? Regardless of the actual size of the logo, it seems it only allows pre-defined dimensions.

From my research, apparently I need to do it with CSS?

Please help if you can :smile:
Clever Moniker


(Clever Moniker) #2

If anyone else wants to know.

Seems there is a pre-defined height.

Add code to customize in the admin panel, and just adjust the max-height value:

.d-header #site-logo {
  max-height: 50px;
}

Cheers.


(Jeff Atwood) #3

Be careful though as this makes every page smaller on the site, since the header is fixed.


(Clever Moniker) #4

Don’t worry, I figured that one out quick! :wink:


(Kiran Patil) #5

I pasted the code in “Header” section of admin/customize/css_html and it is showing on the page.

Please find the attached screenshot, where I would like to increase the size of text logo “Discussion X” on top left side of the page.

Where should I add the code to increase the logo size?


(@SenpaiMass) #6

All u need to do is just paste it in the Custom stylesheet itself rather than the header section there


(Kiran Patil) #7

I did as you said but still the logo size is not changing in the preview.


(@SenpaiMass) #8

Ctrl+f5 to refresh your cache of the browser and it should work.


(Kiran Patil) #9

Cleared the cache and Still no luck here.


(Marco) #10

I had the same problem, now I’ve figured it out: there’s a small, semi-hidden checkbox to the bottom of the admin page to activate the CSS…


(John Oeffinger) #11

I thought I set this correctly but it is still showing as

.d-header #site-logo {
    max-height: 40px
}

Steps followed:

  • Selected customize
  • seleted CSS/HTML
  • selected +New
  • added the code .d-header #site-logo { max-height: 80px; }
  • Checked enabled but did not check “do not include standard style sheet”
  • saved

In looking at the web inspector it still shows

.d-header #site-logo {
    max-height: 40px
}

Can someone walk me through what I am doing wrong? Thanks.


(Kane York) #12

What happens if you try to “preview” it? Make sure to “remove preview” when you’re done.


(John Oeffinger) #13

The inspector says it is the same height, 40px. It did not change to 80px.


(Jeff Atwood) #14

This works for me:

.logo-small, .logo-big {
  max-height: 60px !important;
  margin-top:-8px;
} 

I generally suggest messing around in the f12 browser inspector and modifying the CSS rules there in real time.


(Siraj Mahmood) #15

I follow your comment and add this in customize -> New -> ADD in CSS/HTML Section.

.logo-small, .logo-big {
  max-height: 60px !important;
  margin-top:-8px;
}

But after add and enable this piece of code, on forum front-end (Homepage) logo is showing quite good with increment in height but on admin side logo size is small (default height 40px), I already refresh page many times but still similar. Please help me to solve this issue.


(Sebastian) #16

I also experience design changes not fully showing when in the admin section…

Edit: Which is not a biggie. I wanted to ask, is there a rule of thumb by what to decrease the top margin when increasing logo size? what else is impacted by this?


(Susan Spencer) #17

I followed the above comments and added these lines to Customize–>CSS/HTML–>+New–>CSS

.logo-small, .logo-big {
  max-height: 60px !important;
  margin-top:-8px;
}

This worked, but it prevented display of my navbar, which is defined in Customize–>CSS/HTML–>Header()–>Header.
So I moved the above lines to Customize–>CSS/HTML–>Header(
)–>CSS
This worked and the navbar displayed correctly.


(Kyler Boudreau) #18

@slspencer - if you use the following it will fix the problem:

.logo-small, .logo-big {max-height: 74px !important;}
.d-header {padding-top: 3px;height: 92px;}
.docked {position:relative;}
#main-outlet{padding-top:110px;}

(Sebastian) #19

Related question, friends: Currently any logo is being resized, albeit I notice to great quality loss. Any tips on what format/encoding/etc. the original image should be to ensure the resizing happens with minimal loss of quality?