Move Logo to Left of Business Name
-
Hey there, I am having trouble moving the logo on my static front page to the left of my business name, can you help me do that? The site I am using is goldtreemarketing, thanks a million!!
The blog I need help with is: (visible only to logged in users)
-
Hi
Could you please confirm which website you are trying to edit? I was unable to find a goldtreemarketing.com or a goldtreemarketing.wordpress.com
-
-
Thanks!
The theme is designed mostly to use either a site title OR a site description (the text with your business name).
I would suggest that you create a larger version of your logo graphic and move the text next to the tree. Then, you can display it larger on the website and it will be easier to read the text under the tree. Plus, this way, your business name won’t be listed twice so close to each other.
If you have the premium or business plan (see details at https://wordpress.com/pricing/), it may be possible to adjust the placement of the text with some Custom CSS, but that would still leave the name of your business appearing twice, next to each other.
Hope this helps!
-
Okay great thanks for your help!
I understand that the design of the site is supposed to be one or the other, but that is why I am reaching out to you to see if you can change that for me with a code. I just changed the logo so the business name is no longer below the gold tree, but now (as you were suggesting in the previous email) I would like to just have the business name directly to the right of the logo. Can you make that change for me?
Best,
Lee -
I’m a forum volunteer, so I don’t have access to make any edits directly on your site. Do you have the plans that allow you to edit CSS code? (The Premium or Business plan at https://wordpress.com/pricing/)
If you don’t, then we won’t be able to do anything. If you do, we can try it, but I’m not 100% sure it will work.
-
-
Ok. Keep the logo exactly as you have it, but please turn on the site title option again (I know it will put the text below the tree initially) and then I’ll take a look.
-
-
Ok. I think this is going to get us partway there, at least.
Please add this code to your CSS Editor and let’s see where we land.
.wp-custom-logo .site-title { margin-top: 0.8rem; display: inline-block; } .custom-logo-link { display: inline-block; } .custom-logo { max-width: 100px; } -
And here’s a link that explains where to add it, if you need help:
https://en.support.wordpress.com/custom-design/editing-css/ -
OMG that is so close!!! Seeing that change made me more happy than you know. I have put in like 50 hours on this site and this is my last step, so thank you so much! I will say though that I would still like to make a couple changes to that css code we just input. Can I make the logo closer to the name, and enlarge it to the size it was before? Once again thanks so much for your help so far.
-
Ok – from here you’ll want to play with the width in this code
.custom-logo { max-width: 100px; }and then add the following to the the site-title
margin-left:-50px;If you play with adjusting the max-width and the margin-left numbers, it will bring things closer together.
-
Okay awesome, seriously I appreciate your help so much. So below is what my css customizer looks like currently. So, to make the adjustments I input “margin-left:-50px;” and put it exactly where? Would it be below the site title code or inside? and for the code “.custom-logo {
max-width: 100px;
} ” would i just change the number to be bigger or smaller?/*
Welcome to Custom CSS!To learn how this works, see http://wp.me/PEmnE-Bt
*/
.site-title a, .site-description {
color: #000000 !important;
}article#post-81 {
background: url(‘test jpg’);
}.wp-custom-logo .site-title {
margin-top: .8rem;
display: inline-block;
}.custom-logo-link {
display: inline-block;
}.custom-logo {
max-width: 100px;
} -
Sorry! I should have been more clear. You’ll want to edit the .wp-custom-logo .site-title section that you already have so that it matches this code below.
.wp-custom-logo .site-title { margin-top: .8rem; display: inline-block; margin-left:-50px; } -
Right now (after the changes) my css looks as follows, Everything is perfect i just need to move the title and the logo closer together.
/*
Welcome to Custom CSS!To learn how this works, see http://wp.me/PEmnE-Bt
*/
.site-title a, .site-description {
color: #000000 !important;
}margin-left:-50px;
article#post-81 {
background: url(‘test jpg’);
}.wp-custom-logo .site-title {
margin-top: .8rem;
display: inline-block;
}.custom-logo-link {
display: inline-block;
}.custom-logo {
max-width: 200px;
} -
That looks good, but you have a stray “margin-left:-50px;” in there
Delete the one right above article#post-81
-
and… you are missing it inside here
.wp-custom-logo .site-title { margin-top: .8rem; display: inline-block; margin-left:-50px; }Here’s what your whole CSS block should look like
/* Welcome to Custom CSS! To learn how this works, see http://wp.me/PEmnE-Bt */ .site-title a, .site-description { color: #000000 !important; } article#post-81 { background: url('test jpg'); } .wp-custom-logo .site-title { margin-top: .8rem; display: inline-block; margin-left:-50px; } .custom-logo-link { display: inline-block; } .custom-logo { max-width: 200px; } -
Okay perfect, with those last changes everything looks perfect, except for it changed the name of the business to gold lettering. How can I change it back to black?
.wp-custom-logo .site-title {
margin-top: .8rem;
display: inline-block;
margin-left:-50px;
} -
Hmm…
It should be black because of this code you already had in there
.site-title a, .site-description { color: #000000 !important; }Try deleting that code from where you have it and adding this bit to the bottom of your CSS sheet. It’s a while guess, because typically the !important part will make it work.
.site-title a{ color: #000000 !important; }
- The topic ‘Move Logo to Left of Business Name’ is closed to new replies.
WordPress.com Forums 