Navigation Tokyo-Design an Content-Breite anpassen

12.03.2024 15:40 (zuletzt bearbeitet: 13.03.2024 11:15)
avatar  Sonja_S
#1
So

Liebe alle

Ich weiss, das Thema wurde schon verschiedentlich behandelt - ich habe es auch mit allen dazugehörigen Code-Vorschlägen aus dem Forum versucht, aber ohne Erfolg. Evtl. habe ich etwas übersehen oder ein Code blockiert evtl. den anderen?

Den Contentbereich habe ich schon breiter angepasst (Danke, az!). Jetzt wäre es supercool, wenn auch das Logo und die Navigation die gleiche Breite hätten...

URL: https://sonja-svensson-1.jimdofree.com

Für die Hilfe bedanke ich mich jetzt schon herzlich!

LG, Sonja


 Antworten

 Beitrag melden
13.03.2024 11:52
avatar  az_
#2
avatar
az_

...das sieht doch alles schon ziemlich gut aus. Nur 1 Einstellung vergessen (.jtpl-topbar-section):

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
33
34
35
36
37
38
39
40
41
42
 

/** Header und Navigation fixieren */

.jtpl-header {
position: fixed;
z-index: 15;
background: #930505;
}
 
.jtpl-navigation {
position: fixed;
margin-top: 0;
z-index: 16;
margin-left: 350px;
padding-bottom: 25px;
}

.jtpl-subnavigation {
position: fixed;
margin-top: 0;
z-index: 15;
width: 100%;
}

.jtpl-topbar-section {
max-width: 1260px;
}

.jtpl-section {
margin-top: 0px;
}

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

.jtpl-logo {
padding-bottom: 25px;
}
 

 
 


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
13.03.2024 12:02 (zuletzt bearbeitet: 13.03.2024 12:03)
avatar  az_
#3
avatar
az_

...und wenn die Subnav noch breiter soll, dann mit flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
   
 
.jtpl-topbar-section,
.jtpl-subnavigation .jtpl-subnavigation__inner-nav2,
.jtpl-subnavigation .j-nav-level-1 {
max-width: 1260px;
}
 
.jtpl-subnavigation .j-nav-level-1 {
display: flex;
align-items: center;
justify-content: space-between;
}
 

 


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
13.03.2024 13:55
avatar  Sonja_S
#4
So

Das ist super, vielen Dank für die Hilfe! :)

Und wenn die 3. Nav-Ebene auch breiter soll...?


 Antworten

 Beitrag melden
19.03.2024 12:18
avatar  az_
#5
avatar
az_

… das müsste dann .jtpl-subnavigation .j-nav-level-2 sein. Ausprobieren.
Und schau mal auf meiner Webseite nach CSS-Grundlagen. Da steht, wie du die Container findest.


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
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!