Logo Name

[Alex Moeller]

After adding the twitter widget my logo name is in the upper part of the header. How can I move the text lower?

[Bill Robbins]

Hello Alex,

I’d be glad to take a look for you. Would it be possible for you to post a link to your site here? You can mark the reply as private if you’d like and I’ll be the only one who can see it.

Thanks,
Bill

[Alex Moeller]

Hi Bill

Of course you can look on my site.
http://rotorgraphie.de

[Bill Robbins]

Good Morning Alex,

Thanks for sending that over. You can move your logo down. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #logo {
   	margin-top: 45px;
   }
   

3. Update your settings.

See if that gets it into the correct position for you. You can make the 45 in the snippet above smaller to move it up or larger to move it down if you need to.

Also you may want to add this to your custom CSS to make the text in your tweets a bit smaller:

.header-sidebar .widget {
	font-size: 14px;
}

I would also suggest setting the widget to display only one tweet too.

While I was looking at your header, I noticed the Tweet about the font which for some reason didn’t make it’s way to my Twitter feed. It’s made with an open source font called League Gothic (https://www.theleagueofmoveabletype.com/league-gothic). I made the logo in Photoshop with that font.

If you have any questions or trouble, let me know.

Thanks,
Bill

[Alex Moeller]

Thanks Bill, it work’s great. I have two more things. When I access my site with a mobile device (iPhone) the logo name is not visible because it’s outside of the screen. Sorry, I can’t describe it better 🙂
The second item is the box around the menu button in the header. Is it possible to remove or change the color of the box?

Thanks

Alex

Attachments:

1. 

   IMG_1436.png
   

[Bill Robbins]

Hello Alex,

My apologies for not getting back to you sooner. We drove home from vacation this morning and to make a long story short, ended up at the hospital with my five year old because of a splinter he managed to get deep into his foot. We’re having surgery in the morning to remove it. He should be fine, but today was not quite what we expected.

The best option for a logo is to make one in an image editor and use it instead of the dynamically generated text. It’ll always resize itself to fit. If you can make one and upload it, that’ll give you the best results.

It is possible to resize the text logo so that it’s smaller on smaller screens. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 520px) {
   
   	header.primary #logo p,
   	header.primary #logo h1 {
   		font-size: 30px;
   	}
   
   }
   

3. Update your settings.

See how that looks to you. You may want to adjust the 30 in the snippet above to find the right fit for your phone. If you have any trouble, let me know.

Thanks,
Bill

[Author]

Posts