Grow your CSS skills. Land your dream job.

Disappearing header.

  • # June 13, 2013 at 4:50 pm

    I’m having a problem with my website.

    when you click the nav links to different parts of the page, there’s time where part of my header will dissappear or sometimes my whole header is there something wrong with my css?

    http://hajzer.info/

    and here is a screenshot:

    https://twitpic.com/cx169r/full

    it goes normal when you scroll. but its weird! i’ve tried changing my positioning of my header from fixed to absolute.

    /*
    Theme Name: Redesign Niagara
    Theme URI: http://hajzer.info/
    Author: Attila Hajzer
    Author URI: http://hajzer.info/
    Description: The official theme for Hajzer.info.

    Tags: Attila Hajzer, website Design, grey, black, gray, one-column, Yellow, Single page, scroll, fixed-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
    Text Domain: AttilaHajzer
    */

    *{margin:0px; padding:0px;}
    a{margin:0; padding:0;}
    header, nav, footer, aside {display:block;}

    .both{clear:both;}

    @font-face
    {
    font-family: Delicious;
    src: url(‘font/Delicious/Delicious-Bold.otf’);
    }
    @font-face
    {
    font-family: PTSans;
    src: url(‘font/PT_Sans/PTC55F.ttf’);
    }

    body{background-image:url(‘images/bg.png’); background-attachment:scroll; }
    #wrapper{width:960px; margin:0 auto;}

    header{width:100%; background-color:#F2C718; position: absolute; top: 0px; border-bottom: 1px solid #FFDF5E;}
    #nav-contain{width: 960px; height: 60px; margin: 0px auto;}
    nav{height: 60px; float:left;}
    header #logo-tag a{font-family: arial; width: 259px; float: left; color: #FFFFFF; text-align: center; padding-bottom: 3px; text-transform: uppercase; text-decoration: none;}
    header span{display: block;}
    nav ul {margin-left: 0px; list-style-type: none; float :left;}
    nav ul li {line-height: 60px; float: left; width: 113px; text-align: center; border-left: 1px solid #FFDF5E; font-family: PTSans; text-transform: uppercase; font-weight:800;}
    nav ul li:first-child{border-left: 1px solid #FFDF5E;}
    nav ul li:last-child{border-right: 1px solid #FFDF5E;}
    nav ul li a{display: block; color: #FFFFFF; text-decoration: none;}
    nav ul li a:hover{color: #FFFFFF;}

    # June 13, 2013 at 5:28 pm

    When you click on “Welcome” it scrolls little bit because you have linked it to a hash `#welcome` so it’s scrolling to the anchor.

    Did you want your header to be fixed?

    # June 13, 2013 at 6:55 pm

    You need to use position:fixed on your header for it to stay in the position in the screen and not move whilst scrolling. Make sure it has a higher z-index aswell so it doesn’t drop and hide beneath other elements.

    Position:absolute removes it from the document flow and allows you to place an element anywhere you want on the page in a pixel-perfect way – but it will stay in that exact position.

    # June 13, 2013 at 9:58 pm

    for me, the welcome is not a problem. but its just when it dissappears. ill change it back to fixed and ill try the z-index hoping it helps. thanks a lot everybody

    # June 14, 2013 at 2:46 am

    That fixed it thanks! :) i’m still looking for a good font to use.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".