WordPress.com

1. musictravelwrite
   Member
   Nov 9, 2012, 12:34 AM

   Hello,

   I have the On Demand theme and the custom upgrade. When I change the size of my browser window, the header remains stationary while the page moves, therefore making it off-center. I've checked in multiple browsers (Chrome, Firefox, Safari).

   Separately, I'd also like to know if there's a way I can make the header a link to the homepage of the site.

   Here is my CSS:

   #header {
   position: relative;
   top: 0;
   background: url('http://ladyaandmischu.files.wordpress.com/2012/11/klnheader1.jpeg');
   width: 975px;
   height: 180px;
   margin: 124px;
   margin-top: 0;
   margin-bottom: 0;
   }

   The site isn't launched, but so I've set a temporary password:

   name: kidlitnetwork
   password: thisisapassword

   Any help would be greatly appreciated! Thanks,

   Michelle

   The blog I need help with is kidlitnetwork.com.

2. musictravelwrite
   Member
   Nov 10, 2012, 6:44 AM

   Can anyone help me with this? I've been on a ton of different CSS forums and sites over the last few days and nothing seems to work.

   Thank you!

   Michelle

3. designsimply
   Staff
   Dec 6, 2012, 5:36 PM

   When I change the size of my browser window, the header remains stationary while the page moves, therefore making it off-center.

   I tried testing this at http://kidlitnetwork.com/ but the header always looks centered to me when I changed the browser window size.

   It looks like you might have fixed this by manually replacing your header image using the following CSS. Is that what happened?

   #header-right {
   	display: none
   }
   #header {
   	background: url('http://kidlitnetwork.files.wordpress.com/2012/11/klnheader1.jpeg') no-repeat center;
   	width:100%;
   	height:180px
   }

4. kidlitnetwork
   Member
   Dec 6, 2012, 5:36 PM

   Yes - we've resolved the issue. Thank you!

5. designsimply
   Staff
   Dec 6, 2012, 6:00 PM

   Separately, I'd also like to know if there's a way I can make the header a link to the homepage of the site.

   There is not a way to add links using CSS only, but what you can do is add something that does have a link, such as the Appearance → Theme Options → Logo in this case, and then you can use the link itself when you replace the background image and then the link will still work. Since your site doesn't have a logo setup, I couldn't test on it directly, but here is an example you can start with using the Preview option on the Appearance → Custom Design → CSS page:

   #header-left {
   	padding: 0;
   }
   #header-left .site-title {
   	margin-bottom: 0;
   }
   #header-left h1 a {
   	display: block;
   	width: 980px;
   	height:180px;
   	background: url('http://kidlitnetwork.files.wordpress.com/2012/11/klnheader1.jpeg') center no-repeat;
   }
   #header-left h1 a img {
   	display: none;
   }
   #header-right {
   	display: none;
   }

   You may need to adjust the CSS a little based for your blog.

Topic Closed

This topic has been closed to new replies.