Need help? Check out our Support site, then


Header stationary when browser size changes

  1. 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. 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. 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. Yes - we've resolved the issue. Thank you!

  5. 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.

About this Topic