Community Forums › Forums › Archived Forums › General Discussion › Logo Header Size – Smart Passive Income
Tagged: header, header to small, image, Logo Image, Smart Passive Income
- This topic has 14 replies, 6 voices, and was last updated 8 years, 1 month ago by
Scott G..
-
AuthorPosts
-
November 29, 2016 at 7:21 pm #196803
MyCoffee
MemberHi there,
I've been trying to put a logo header on my site (using the smart passive income theme) but I'm having some trouble.
The header image Im using is 860x160px ... but its coming out extremely small.
I've read some similar forum questions and applied a few possible solutions, but none of them seem to work.
*Currently, I have a side header widget that is up, but even after removing it the Logo header image is still small.
Any suggestions on how to manipulate the logo to a normal 860x160 size?
Thank you in advance!
http://coffeestandbusiness.comNovember 29, 2016 at 8:26 pm #196805MyCoffee
MemberSo, in tinkering with the CSS I managed to make the logo header image bigger using the code below.
However, this totally messes up the way the logo words on mobile devices.
Any suggestions?
Here is my code:
}
.header-image .site-title > a {
min-height: 80px;
}.site-header > .wrap {
max-width: 1280px;
padding: 1px 0;
}.site-header .widget-area {
text-align: right;
margin-top: 10px;
}.header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
float: left;
min-height: 160px;
width: 800px;
}December 29, 2016 at 10:07 am #198422Scott G.
MemberI had some issues getting my logo into my header as well. I was not trying to put a full header image in place, but instead I wanted the logo to be larger and to have "less space" around it (top, bottom, and left). Along with the help of good folks on here, and with a little tinkering, I finally got it the way I want it.
If my solution would work for you, I will go find my code changes for you. Let me know.
My site is: http://www.investinggoldnow.comScott
January 1, 2017 at 1:51 am #198539john741
MemberYou can login to your wordpress and go to appearance and choose editor. Then use Control + F and search for logo field and change the default pixels to required pixel size u needed on your header.
Great community for Unsolved Mysteries where you can find lot many mystery stories explanation videos.
January 1, 2017 at 4:15 am #198540bdufff
MemberHey MyCoffee,
Happy New Year to you!
Would you be able to disable maintenance/coming soon mode - so I can access your site, to view your source code?
Let me know, and I'll be more than happy to take a look! 🙂Regards,
BobbyJanuary 2, 2017 at 9:19 am #198601Derek
MemberYou can change the logo size by modifying this code in your functions. Replace the numbers.
//* Add support for custom header add_theme_support( 'custom-header', array( 'width' => 800, 'height' => 160, 'header-selector' => '.site-title a', 'header-text' => false, 'flex-height' => true, ) );
~’;’~
January 4, 2017 at 11:11 am #198754leviite
MemberI am running into the same problem. My logo is smaller and to left. When I add an image in the right field it make is larger and centers it with huge spaces above and below. I need to make these even by either making the log larger and centered or moving the image on the right up. Thank you for any help you can provide. I tried the above by Derek but it didn't change the logo at all.
January 4, 2017 at 8:04 pm #198775Scott G.
MemberHere's what I did to fix the problem. I'm not an expert, so I had to screw around with it to get it right. I am pasting my notes below from my own notes that I keep in case I have to do it again. If this doesn't solve your problem exactly, then let me know and I will take a closer look at the actual file to confirm all the changes I made (assuming you want to achieve the same results as I did... check my website to see: http://investinggoldnow.com/)
You can play with the number of pixels to fit your needs, as you'll also need to play with your logo image resolution/size... etc...
Make the Logo / Header Image Larger
Make this change…
.header-image .site-title > a {
height: 160px;(last line above was: min-height: 80px;)
Can play with this too…
.header-image .title-area {
width: 430px;(last line above was: max-width: 430px;)
Reduce the Space (Padding) Around the Header Logo/Image
.site-header > .wrap {
max-width: 1280px;
padding: 10px 0;
}(padding was: 60px)
If you change the padding (above), you'll need to do this as well...
Move the Right Header Widget Vertically
Vertically center the right header widget (it changes after the above padding update)
Essentially, this brings the widget down in an attempt to center it by adding a top margin.site-header .widget-area {
text-align: right;
margin-top:30px;
}Margin-top was: 0px
January 8, 2017 at 4:07 pm #199018leviite
MemberThank you Scott G. I tried making these changes but when I do so. Nothing changes. I looked at your site and your header is exactly like I would like mine to look. Any Idea what I am doing wrong?
January 8, 2017 at 4:30 pm #199020Scott G.
MemberCan you provide a link to your website so I can see it?
January 8, 2017 at 4:40 pm #199023leviite
MemberThank you! it is http://www.renovationshero.com
January 8, 2017 at 4:42 pm #199024Scott G.
MemberAlso, send me you style.css file so I can see what you did...
email to: [email protected]January 8, 2017 at 4:47 pm #199026Scott G.
MemberYes... you have the same issue I had...
January 8, 2017 at 7:20 pm #199035leviite
MemberThank you for your help. I sent you a copy of my css
January 8, 2017 at 9:13 pm #199045Scott G.
MemberCheck your email
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.