Add white space padding below sticky header?

Community Forums Forums Design Tips and Tricks Add white space padding below sticky header?

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  MM 1 year, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #43389

    MM
    Participant
    Post count: 128

    Hi,

    On mikemetcalfe.co  I’m trying to add white space padding below the sticky header, so when a user scrolls up, the scrolling up content doesn’t actually touch the Menu bar. Have experimented with CSS but can see how / where to add 20/30 px of space to prevent that?

    Ideas?

    Thanks!

    #43398

    Aaron Hartland
    Participant
    Post count: 37

    I think this might give you the look you’re seeking….

    For the #header div, change the background color from transparent to white (#fff):
    `/** added **/
    #header {
    background: url(images/bg.png) repeat-x scroll 0 0 #fff;
    margin: 0 auto;
    z-index: 100;
    position: fixed;
    top: 0;
    width: 100%;
    }`

    And then add 5px more margin to the top of the #inner div:
    `#inner {
    clear: both;
    margin-top: 90px;
    }`


    Aaron Hartland | http://www.aaronhartland.com
    Twitter  |  Facebook  |  LinkedIn  |  Google+

    #43399

    MM
    Participant
    Post count: 128

    Hi Aaron, perfecto.

    Any idea why videos showing above menu? i.e. http://mikemetcalfe.co/angel-investment-startup-legals-popular-funding-clauses/

    Thanks again!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.