• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Finally got floating header working!

Russ

Well-known member
#7
What do you mean?
Well one of the problems I've been having with a floating nav, some others too is when you click on an alert say someone quotes you, it'll take you to that post, but the floating nav is hiding some of the post content.
 

Forsaken

Well-known member
#8
Well one of the problems I've been having with a floating nav, some others too is when you click on an alert say someone quotes you, it'll take you to that post, but the floating nav is hiding some of the post content.
There are a few ways around that, but they're a bit hackish and should be avoided due to complications they can bring up (especially in responsive situations).

I'll do it on request, or on my own stuff occasionally but I prefer not to do it. It's also a bit of a gimmick and a lot of people find it annoying.
 

Russ

Well-known member
#9
There are a few ways around that, but they're a bit hackish and should be avoided due to complications they can bring up (especially in responsive situations).

I'll do it on request, or on my own stuff occasionally but I prefer not to do it. It's also a bit of a gimmick and a lot of people find it annoying.
I've done some funky padding stuff but it doesn't feel right in the end, nor would I put it in a release of mine heh.
 

Dynamic

Well-known member
#10
I got around it by moving the bottom information to the top. Eg "Dynamic, Today at 3:00 PM". That sits at the top of the message content with some padding. I made sure that the bottom of my header was higher than the top of the message content. Looks completely normal and does not look like a "hack".
 

Liam W

Well-known member
#11
I got around it by moving the bottom information to the top. Eg "Dynamic, Today at 3:00 PM". That sits at the top of the message content with some padding. I made sure that the bottom of my header was higher than the top of the message content. Looks completely normal and does not look like a "hack".
Hmmm, I just discovered I have the issue. However, I don't want to move the posted info, so I'm moving the anchor toggle class to the li tag.

However, it is still being obscured. Any tips?
 

Liam W

Well-known member
#17
Nice site you have there @Liam W
I have quick question if I may - how did you stop youtube videos breaking out of Xenporta frame on the homepage.....
There was a decent amount of swearing involved :)

I'll see if I can find the css I used.

EDIT

I added this CSS to my extra.css:

Code:
.video-container {
    position: relative;
    padding-top: 50%;
    overflow: hidden;
    width: 100%;
    max-width: 560px;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    max-height: 320px;
}
and I changed my youtube media code to this:

HTML:
<div class="video-container">
<iframe class="responsiveVideo" type="text/html" width="100%" height="100%" src="//www.youtube.com/embed/{$id}?wmode=opaque&html5=1" frameborder="0" allowfullscreen></iframe>
</div>
 
#19
There was a decent amount of swearing involved :)

I'll see if I can find the css I used.

EDIT

I added this CSS to my extra.css:

Code:
.video-container {
    position: relative;
    padding-top: 50%;
    overflow: hidden;
    width: 100%;
    max-width: 560px;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    max-height: 320px;
}
and I changed my youtube media code to this:

HTML:
<div class="video-container">
<iframe class="responsiveVideo" type="text/html" width="100%" height="100%" src="//www.youtube.com/embed/{$id}?wmode=opaque&html5=1" frameborder="0" allowfullscreen></iframe>
</div>
Excellent. I will try that. Many thanks
Is the youtube media code located in the same template - the extra css?