- This topic is empty.
August 20, 2012 at 12:17 pm #39448
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:
}August 20, 2012 at 12:24 pm #108214
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/August 21, 2012 at 9:37 am #108261
Sorry, it’s Opera 12.01, ie the latestAugust 21, 2012 at 10:13 am #108264
Then I can only assume that 12 didn’t fix it.August 22, 2012 at 12:58 pm #108330
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.August 23, 2012 at 6:21 am #108353
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.August 23, 2012 at 2:23 pm #108364
@jurotek Thanks for the message but I’m more of a Drupal guy. WP is not in my wheelhouseAugust 24, 2012 at 4:20 am #108409
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:
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.
- The forum ‘CSS’ is closed to new topics and replies.