Header und Navigationsleiste fixieren

31.07.2019 08:48 (zuletzt bearbeitet: 05.08.2019 16:44)

Daniel
#1

Da

Hallo zusammen,

Ich bräuchte Hilfe beim fixieren des Header und der Navigationsleiste.

Die Seite die es betrifft, ist die folgende: https://testrwds.jimdo.com/

Ich würde gerne dort den Header sowie die Navigationsleite fixieren. Den Header zu fixieren habe ich hinbekommen aber ich weiß nicht wie ich die Navigationsleiste auch fixiere. Auf der Startseite ist der Header fixiert wenn ich dann weiter auf eine Flagge klicke und auf die nächste Seite komme, möchte ich, dass auch die Navigationsleiste gefixed wird. Ist das machbar?

Mein Code sieht bislang so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 

 <style type="text/css">
/*<![CDATA[*/
 
.jtpl-header {
position:fixed;
}
 
/*]]>*/
</style>
 
<style type="text/css">
/*<![CDATA[*/
 
.jtpl-section-main {
 
left:300px;
}
 
/*]]>*/
</style>
 
 

Was muss ich ändern um das zu erreichen was ich möchte?

LG

Daniel

Antworten

Beitrag melden

#2

02.08.2019 14:40 (zuletzt bearbeitet: 05.08.2019 16:42)

Anne
#2

An

Anne

Hi Daniel,
du musst den ersten Teil deines Codes nur ergänzen. Der Zweite Teil deines Codes ist überflüssig.

Also:

1
2
3
4
5
6
7
8
9
10
11
12
 
<style type="text/css">
/*<![CDATA[*/
 
.jtpl-header {
position:fixed;
}
 
.jtpl-navigation {
position: fixed;}
 
/*]]>*/
</style>
 

Grüße, Anne

Antworten

Beitrag melden

#3

05.08.2019 16:45 (zuletzt bearbeitet: 05.08.2019 16:46)

az_
#3

az_

Bitte denkt dran, Code im Forum immer mit Code zu klammern bzw. Einzukapseln (s.u.)

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#4

02.09.2019 09:21

Daniel
#4

Da

Daniel

Hi @Anne , erstmal danke für deine Rückmeldung.

Leider funktioniert das nicht. Mit deinem Code springt "Zwei Jahrzehnte lang auf höchstem Niveau" nach links und weiterhin "klebt" die Navigationsleiste nicht wenn ich ich auf die nächste Seite komme (nachdem ich z. B. auf die Deutschland Flagge geklickt habe).

Hat jemand eine Idee?

Antworten

Beitrag melden

#5

04.09.2019 10:21 (zuletzt bearbeitet: 04.09.2019 10:26)

az_
#5

az_

Das ist ein bisschen kompliziert, denn Du musst auch an die anderen Bereiche denken. Und die Umschalter für die Sprachen gehören in die Sidebar, damit sie von jeder Seite geklickt werden können.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 

 
<style type="text/css">
/*<![CDATA[*/
 
.jtpl-header {
    position:fixed;
    z-index:15;
    background:#ccc
}
.jtpl-navigation {
    position: fixed;
    margin-top:0;
    z-index:16;
    right:0;
}
 
.jtpl-subnavigation {
    position:fixed;
    margin-top: 90px;
    z-index:15;
    width:100%;
}
 
.jtpl-section {
    margin-top: 130px;
}
 
/*]]>*/
</style>
 

 

...und auf der ersten Seite brauchst Du auch noch etwas für .jtpl-main:

1
2
3
4
5
 

.jtpl-main {
    margin-top: 90px;
}
 
 

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html