- This topic has 6 replies, 3 voices, and was last updated 8 years, 11 months ago by
.
- Posts
Hi my logo is coming up really small that I have added to the header. I have downloaded site origin css and tried to change the size through that. it isnt changing the size. could you please help. thanks
Hi Anna
Great to hear from you 🙂
Do you perhaps have a link I could check to see the problem live? If you’d like to keep your site private you can use the “Set as private reply” checkbox below the comment field.
Thanks
Thanks 🙂 Your site is looking great.
I can help with pretty much whatever you want to do here. Below is one option:
/* Header */ @media (min-width: 1024px) { .tagline .site-header.scale.fixed .site-branding-container .site-branding img { max-width: 100%; } } @media (min-width: 1024px) { .site-header.scale.fixed .site-branding a { display: inline-block; height: 75px; vertical-align: middle; } .site-header.scale.fixed .site-branding h2.site-description { display: inline-block; height: 75px; margin-left: 15px; } }Remove the contents of Appearance > Custom CSS and insert the above.
Let me know how it goes.
Hi 🙂 Really sorry for the delay. We recently updated the way forum notifications work to stop them landing in Spam. It seems we lost our internal notifications in that process. Apologies, we’ll resolve ASAP.
The Custom CSS is working. Your logo and tagline is now fitting in the header in both the top and fixed position after scroll. The tagline shifts to the right once the header goes sticky to allow the logo more space. This was my understanding of the challenge.
I’ll take another look at the challenge now and provide further feedback in a moment.
1. A tall logo like the one you’re working with is hard to display well in a small space so firstly, I recommend: Appearance > Theme Settings > Header: Disable the sticky header.
2. Go to Appearance > Customize > Theme Design > Header and increase the header height as required. The way the header is setup means the logo won’t push the header height, we need the header to be tall enough to accommodate our larger logo. Try 150 just to test.
3. Go to Appearance > Custom CSS, remove our previous CSS and instead insert:
/* Header */ .tagline .site-header .site-branding img { max-height: 140px; }Hope that helps 🙂
(Apologies for editing my original reply, it wasn’t correct so I took another look at the problem, hope the above helps. I’m happy to login to the site and assist further if not.)
You must be logged in to reply to this topic.