Fixing Header mit CSS

-1

Ich versuche das beheben die Kopfzeile auf der Oberseite für meine Website, aber während ich Position verwende: behoben; Der Header verschiebt sich nach links und der Rest des Inhalts der Seite wird angezeigt. Ich habe versucht, Z-Index und Padding noch Header ist auf der linken Seite, kann jemand bitte helfen, die Lösung zu finden.Fixing Header mit CSS

Dank

<body> 
<div class="header_area "> 
<div class=" header "> 
<div class="logo floatleft"> 
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/> 
</div> 
<div class="mainmenu floatright "> 
<nav class="main-navigation pull-right hidden-xs hidden-sm"> 
(now some list there)

.header_area{} 
.header 
{ 
    position: fixed; 
    z-index:1000; 
    padding: 10px 0; 
    margin: 0 auto; 
    transition: all 1.3s ease 0s; 
    -moz-transition: all 1.3s ease 0s; 
    -webkit-transition: all 1.3s ease 0s; 
    -o-transition: all 1.3s ease 0s; 
    -ms-transition: all 1.3s ease 0s; 

} 
body{ 
    padding: 20px 10px; 
    font-family: sans-serif, open-sans; 
    font-size:14px;line-height:20px;color:#414141; 
} 
nav.main-navigation { 
    position: relative; 
    z-index: 9999; 
    font-family: bebasregular; 
}

Quelle

2016-07-23 niharika Singhal

try: margin-von-oben und margen von oben Attribute spezifische Positionierung – Vaibhav

Versuch hinzuzufügen:

position: fixed; 
top:0; left:0; right:0;

Quelle

2016-07-23 20:08:09 Arthur

Hallo zu bekommen, verschoben sie den Header an der richtigen Stelle, aber der Inhalt der Seite befindet sich noch auf der Oberseite. –

Fügen Sie eine 'margin-top: {header-height} px' in Ihrem Content-Tag hinzu – Arthur

Danke, dass es funktioniert hat –

-1

Diese

<div class="header_area "> 
<div class=" header "> 
<div class="logo floatleft"> 
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/> 
</div> 
<div class="mainmenu floatright "> 
<nav class="main-navigation pull-right hidden-xs hidden-sm"> 
</nav> 
    </div> 
    </div>

Versuchen

.header_area{ 
height:400px; 
} 
.header 
{ 
    position: fixed; 
    z-index:1000; 
    padding: 10px 0; 
    background-color:red; 
    top:0px; 
    left:0px; 
    width:100%; 
    margin: 0 auto; 
    transition: all 1.3s ease 0s; 
    -moz-transition: all 1.3s ease 0s; 
    -webkit-transition: all 1.3s ease 0s; 
    -o-transition: all 1.3s ease 0s; 
    -ms-transition: all 1.3s ease 0s; 

} 
body{ 
    padding: 20px 10px; 
    font-family: sans-serif, open-sans; 
    font-size:14px;line-height:20px;color:#414141; 
} 
nav.main-navigation { 
    position: relative; 
    z-index: 9999; 
    font-family: bebasregular; 
}

Quelle

2016-07-23 20:12:21

Fixing Header mit CSS

Antwort

Verwandte Themen