Taller Header Image

[Blake Haas]

Hi Bill,

We like you moonrise theme so far, but have run into a problem with the header image we have inserted. It is 100px tall x 400px wide and with the extra height, some of our content on the pages is getting chopped off at the top. How can I make all the content show show and still have this taller header?

Thanks,

Blake

[Bill Robbins]

Hello Blake,

Thank you for your business first of all. Great question too. There are a couple of options for you. If you’ll go to the theme options page and select the styling tab, in the header section you’ll find an option to choose between a fixed or scrolling header. You can choose a scrolling header which will keep it from covering up your content. That’s one option.

The second option is to make the header smaller as your visitor scrolls. Here’s how to do that:

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

   
   #header.movement {
   	height: 80px;
   }
   
   #header.movement #logo {
   	padding: 0;
   }
   
   #header.movement #logo img {
   	height: 70px;
   	width: auto;
   }
   

3. Update your settings.

That would shrink down the size of your header as your visitor scrolls which will keep less of your content from being covered up by the header.

See if either of those two will work for you. If you have any questions or trouble, let me know.

Thanks again,
Bill

[Author]

Posts