Header

[Carl]

Hey Bill,
I made my logo bigger than the example you have. The problem is when I scroll down the page or go to another page the thickness of the header is pretty large. Do you have another solution for a bigger logo. Maybe changing the opacity or somehow creating the logo in front of the header, so the thickness isn’t so large.

Thanks for your help

Carl

[Bill Robbins]

Hey Carl,

I may know of a way to work around that. In our Moonrise theme, we have a method to shrink the logo once the user starts scrolling. Any chance you could send over a link to your site so I can a closer look for you?

Thanks,
Bill

[Carl]

Right now I am working on it on the backend and I have a coming soon page up right now. If you email me, I can give you a user name and password for you to log into.

[Bill Robbins]

You’re welcome to email it to me at support@organizedthemes.com or you can mark your reply here as private and I’ll be the only one who can see it. Either way works fine. I’ll take a look after we get back from lunch.

[Carl]

This reply has been marked as private.

[Bill Robbins]

Thanks for sending over the login Carl. There’s a couple of different approaches to this you could consider. In my Bottega theme (http://demo.organizedthemes.com/bottega) we have the logo positioned absolutely which causes it to hang over the content a bit below it. You can do that with this theme. Here’s how to do that:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   #logo,
   #text-logo {
   	max-width: none;
   	position: absolute;
   }
   

3. Update your settings.

The other option is a bit more involved. You can add a couple of lines of javascript that will insert a class to the header once the browser is not scrolled all the way to the top. You could use that to apply a different style to the header at that point. That would be similar to how we add in a header bar background on scroll in the theme. If you’d like to go that route, let me know.

You could also use a semi-transparent background for the header bar. Here’s how to do that:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   #header.scroll-background,
   body.standard #header,
   body.blog #header,
   body.archive #header,
   body.error404 #header,
   body.search #header {
   	background-color: rgba(26,26,26,0.8);
   }
   

   Just replace the rgba color with the one you’d like to use. The last number there is the transparency setting on a scale of 0 (transparent) to 1 (opaque).

3. Update your settings.

If you need any help, let me know,
Bill

[Author]

Posts