Header stationary when browser size changes

  • Unknown's avatar
    musictravelwrite · Member ·

    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: (visible only to logged in users)

  • Unknown's avatar
    musictravelwrite · Member ·

    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

  • Unknown's avatar
    designsimply · Member ·

    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
}
  • Unknown's avatar
    kidlitnetwork · Member ·

    Yes – we’ve resolved the issue. Thank you!

  • Unknown's avatar
    designsimply · Member ·

    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.

  • The topic ‘Header stationary when browser size changes’ is closed to new replies.