Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS fixed bar hide piece of my header

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #194689
    mixafe
    Participant

    hello all css trickers thanx in advance and hope to help

    as title say i have appended top fixed bar writen by jquery and added before first element inside body tag

    used jquery

    $(document).ready(function () {
    $(“body > :first-child”).before(”

    <#div><#div #class=’skin’ >you’r welcome<#/div><#/div>

    “);
    }

    used css

    .skin{
    padding: 20px 20px 20px 20px;
    background:#000000;
    width: 100%;
    position: fixed;
    z-index: 999;
    box-shadow: 1px 2px 9px #2A5200;
    border-top: 1px solid #90f128;
    border-bottom: 1px solid #90f128;
    }

    now piece of header is hidden by that fixed bar
    what’s problem ? is it because the bar loaded after document is ready $(document).ready();

    or !!!

    #194693
    Shikkediel
    Participant

    Fixed position takes an element out of the page flow so your header is below it – try to give it some extra ‘top’ positioning, just as much as the fixed bar’s height. If it has static positioning, make it relative.

    #194695
    Paulie_D
    Moderator

    Just giving the body enough padding-top (the same as height of the fixed element) to push down the content usually does the trick.

    No need to get extra tricky with positioning.

    #194698
    Shikkediel
    Participant

    You are right there, I later realised (and wanted to add).

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.