Forums

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

Home Forums CSS Disappearing header.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #45518
    Attila Hajzer
    Participant

    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;}

    #138646
    Alen
    Participant

    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?

    #138656
    aLtikal
    Participant

    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.

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