Transparent Header – more questions

[Tova Zussman]

Hi again,
I asked yesterday about making the header transparent so my logo and navigation links are on top of the picture on the home page.
However, on the inner pages, the logo is overlapping the text. How do I avoid this?
(See example: http://tovazussman.com/clients/brooklyn/about-us/)

[Bill Robbins]

There are two options for you. You can move the content down a bit on the inside pages. If you’ll go to the Styling tab in the theme options page you’ll find an “Inside Page Top Margin” field that you can use to move the content down so that it’s out from under your logo.

The second option would be to adjust the “movement” class so that on the inside pages, the logo is always the size that it is when the user has scrolled and it’s only larger on the home page. 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 #logo {
   	padding: 0;
   }
   
   #header #logo img {
   	height: 70px;
   	width: auto;
   }
   
   .home #header.movement #logo {
   	padding: 0;
   }
   
   .home #header #logo img {
   	height: auto;
   }
   
   .home #header.movement #logo img {
   	height: 70px;
   	width: auto;
   }
   

3. Update your settings.

See if one of those options won't work for you. Let me know if you have any trouble,
Bill

[Bill Robbins]

Just replace this section:

#header.movement {
    height: 70px;
}

#header.movement #logo {
    padding: 0;
}

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

and leave the rest.

[Author]

Posts