Fixed header problem in Opera (only)

[Cornucopia]

I’ve been developing a WordPress site. I have made my header fixed using CSS and it works in all the major browsers I’ve tested it on so far on a Mac, PC (including IE back to v8!!) and Android tab. However, it doesn’t display correctly in Opera (both Mac and PC versions), which is, unfortunately, what my client uses. The header doesn’t appear at all and there is a gap where the header should be. This is the test site: http://1056618737.test.prositehosting.co.uk . I would really appreciate some help with this please as I just don’t know what to do. I’m not particularly technical so please don’t baffle me with complicated code. Many thanks in advance.

NB this is what I have put:

#main {
margin-top: 115px;
}
#header {
position:fixed;
z-index:1000;
margin-top: -115px;
height: 115px;
}

[Paulie_D]

You haven’t said which version of Opera, i believe there was a FP bug in Opera 10+ which will be resolved by Op 12

http://www.favbrowser.com/latest-opera-12-build-squashes-the-positionfixed-bug/

[Cornucopia]

Sorry, it’s Opera 12.01, ie the latest

[Paulie_D]

Then I can only assume that 12 didn’t fix it.

[Cornucopia]

jurotek, thanks for your help. By doing what you suggested, I managed to get it to work in Opera… but then it didn’t display correctly in other browsers: not having margin-top: -115px in #header dropped the header down in other browsers. I assume you intended to include position: fixed.

Maybe I’m doing something wrong – I’m not very code-savvy. Can I write a specific style for Opera only? How do I do that? Excuse my ignorance but we all have to start somewhere!
PS I’ve put it all back to where it was for now. Thanks.

[Cornucopia]

Hi jurotek, it still didn’t work as it was (your solution appeared to drop the header down in all but Opera) but after some fiddling, realised that if I applied 115px to margin-top of .container, that made all browsers display correctly. So thanks very much for getting me on the right track.

Actually, maybe you can help me with a related query? I have page anchors on eg this page: http://1056618737.test.prositehosting.co.uk/beef-recipes . If you click on Beef stroganoff in the menu on the right side-bar or at the top of the main content, the anchor target disappears behind the fixed header on all browsers except Opera (12), which actually momentarily hides the header until you hover over it or scroll. Is there a way I can offset the anchor target so that the heading (Beef stroganoff recipe, in this case) always appears below the header and isn’t hidden by it. I guess in theory that means offsetting it by 115px (the height of the header). I need to be able to do this with one universal style or script rather than individually styling each anchor as it is a WordPress site and my client will be adding the content. Can you help please? Many thanks.

[Paulie_D]

@jurotek Thanks for the message but I’m more of a Drupal guy. WP is not in my wheelhouse

[Cornucopia]

Thanks both for looking at this. I’m not sure it’s particularly a WordPress issue though. I just need to know if there’s a way of styling anchors in general so they all offset by 115px throughout the site, rather than styling individual named anchors.

Actually, I haven’t even successfully managed to offset one named anchor yet so I don’t know what hope I have off being able to do it universally. This didn’t work:
#BeefStroganoff {
margin-top: 115px;
}
nor this:
a#BeefStroganoff {
margin-top: 115px;
}
Am I making a fundamental mistake here? It’s stabbing in the dark at the moment. So please don’t abandon me in my hour of need! Thanks.

[Author]

Posts