WordPress.org

Forums

Decode
[resolved] CSS styling advice (3 posts)

  1. Steven Jay Cohen
    Member
    Posted 1 year ago #

    Hi Scott,

    On my site, I've put a colored bar at the top and bottom of the page.
    I'd love to anchor these to the top and bottom of the screen.

    Currently, I have:

    body {
    	border-top: 10px solid #46134f;
    	border-bottom: 10px solid #46134f;
    }

    Any suggestions on how to change it to anchor it?

  2. Scott Smith
    Member
    Theme Author

    Posted 1 year ago #

    body::before {
    content: "";
    border-top: 10px solid #46134f;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    }

    and likewise for the bottom:

    body::after {
    content: "";
    border-bottom: 10px solid #46134f;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    }

    Note that the admin bar will cover this up unless you add more CSS to detect and change this, but I'm assuming you won't mind.

  3. Steven Jay Cohen
    Member
    Posted 1 year ago #

    Thank you!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic