Fixed Site Title Question

hudsonchemicals · Member · Mar 1, 2016 at 5:00 pm
Copy link

Add topic to favorites
Hello, AGAIN! I’ve been experimenting with the placement of the site title for hudsonchemicals.com. I tried something, that was pretty cool, but ended up being problematic.

I had set the site title in a fixed position, so that when you scrolled you would see it disappear >between< the main and the content of the site; Right down between them! It was awesome, until I viewed it on a mobile device. There it would float on top for a sec, then disappear, only to reappear lower; once you get down to what is normally the sidebar. There it was visible, but would disappear under the widgets’ content as you scrolled.

What’s the point of all this? I’m wondering if it’s possible (through CSS) to make it disappear completely, once it’s passed below the pagetop. I really like how it looked to have it setup that way, but didn’t like that it would reappear lower in the scroll on a mobile device. Can this be done?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 1, 2016 at 10:08 pm
Copy link
You know, this isn’t possible with CSS alone. It would require Javascript or jQuery to do this and we cannot do those at WordPress.com.
hudsonchemicals · Member · Mar 1, 2016 at 10:17 pm
Copy link
I figured it would. Is it possible to set the site title up as fixed for the desktop version, but absolute for mobile devices? That way, the effect can (at least) be present somewhere. It really is cool!
hudsonchemicals · Member · Mar 1, 2016 at 11:11 pm
Copy link
^Also….When I tried all this, I had to move the site title over to the right a bit from its original position so it disappears between the content & main completely; with no overhang. Just figured I’d mention that, since you’ll likely note that it would if I didn’t relocate it. I hope I can do this! It really looks cool, as it disappears between the two segments.
hudsonchemicals · Member · Mar 1, 2016 at 11:49 pm
Copy link
I need to word that a little differently. I would like to have the site title fixed on desktop view size screens, but absolute for screens at the size where the theme reverts to the elongated/stacked mobile device view.
hudsonchemicals · Member · Mar 2, 2016 at 4:00 pm
Copy link
@thesacredpath Off-topic-side-note to that^…..I finally got the dropshadow right for the tabs!
thesacredpath · Member · Mar 3, 2016 at 5:13 am
Copy link
Add this which fixes the site logo/title at 881px and wider.
```
@media screen and (min-width: 881px) {
.site-title {
	position: fixed;
	padding-left: 10px;
	top: 100px;
}
}
```
hudsonchemicals · Member · Mar 3, 2016 at 6:25 am
Copy link
Perfection! I actually had everything, but the 881 number. Had 600 in the spot…My medicated-brain was going by the max media width of 585, with some border, as a guesstimate. SO dumb, right now. LMAO!!! Thank you, Sir!
thesacredpath · Member · Mar 3, 2016 at 7:33 am
Copy link
Nope, not dumb, and you are welcome.
hudsonchemicals · Member · Mar 3, 2016 at 7:39 am
Copy link
Mahalo

No items found.