Style von Navigation "New York" über CSS anpassen

10.08.2017 11:12 (zuletzt bearbeitet: 10.08.2017 20:13)
#1
mo

Hallo!

Ich arbeite gerade an dieser Website (Designvorlage "New York"): www.baumgarth-consulting.de und würde mich sehr über Hilfe freuen.
Einiges konnte ich über den Head-Bereich schon anpassen (siehe unten), ich habe aber sehr wenig Ahnung von CSS und komme jetzt nicht mehr weiter.
Diese zwei Themen sind noch offen:

1. Ich möchte den Zeilenabstand zwischen den beiden Zeilen der Hauptnavigation verkleinern. Dafür habe ich versucht, "margin-bottom" der Menüpunkte von 10 auf 0 zu setzen. Versucht habe ich es mit diesem Code (und einigen Varianten davon), damit passiert aber leider gar nichts.:

1
2
3
4
5
6
7
 
<style type="text/css">
/*<![CDATA[*/
 
.jmd-nav__list-item-0 { margin-bottom: 0px; }
 
/*]]>*/
</style>
 



2. Ich möchte die Breite des Strichs unter der Subnavigation kürzen, sodass sie die gleiche Breite und Position hat wie die Trennstriche im Content-Bereich.
Deutlich wird es hier: https://www.baumgarth-consulting.de/consulting-und-coaching/
Dafür habe ich das hier versucht, damit passiert aber wieder nichts:

1
2
3
4
5
6
7
 
<style type="text/css">
/*<![CDATA[*/
 
.cc-nav-level-1 j-nav-level-1 { padding-left: 0px; padding-right: 0px; }
 
/*]]>*/
</style>
 



Vielleicht kann etwas davon mal jemand anderem Nutzen, deshalb schreibe ich auch, was schon funktioniert hat:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<style type="text/css">
/*<![CDATA[*/
/* Warenkorb ausblenden */
.j-cart.is-empty { display: none; }
 
/* Seitentitel über Logo/Sitemap ausblenden */
.jtpl-title { display:none ;}
 
/* Abstand oben einfuegen fuer Logo in mobiler Ansicht */
.jtpl-header { margin-top: 50px; }
 
/* Abstand Logo zu H1 */
.jtpl-navigation { margin-bottom: 0px; }
 
/* Subnavigation Abstaende kleiner */
.jtpl-subnavigation { padding-top: 0px; padding-bottom: 0px; }
 
/*]]>*/
</style>
 


 Antworten

 Beitrag melden
10.08.2017 16:33
#2
mo

Jetzt konnte ich es doch selbst lösen, falls jemand ähnliche Lösungen sucht, hier mein Weg (geht vielleicht auch weniger kompliziert, aber es funktioniert):

/* Abstand zwischen Navigationszeilen kleiner */
.navigation-colors li a:hover, .navigation-colors li a:active, .navigation-colors li a:focus, .navigation-colors li.cc-nav-current > a:link, .navigation-colors li.cc-nav-current > a:visited, .navigation-colors li.cc-nav-parent > a:link, .navigation-colors li.cc-nav-parent>a:visited { margin-bottom: 0px; border-bottom-width: 2px; }
.navigation-vertical-alignment a, .navigation-vertical-alignment a:link, .navigation-vertical-alignment a:visited { margin-bottom: 0px; border-bottom-width: 2px;}

/* Unterstreichung Subnavi an Breite des Content-Bereichs anpassen */
.jtpl-subnavigation .j-nav-level-1 {
padding-right: 0px; padding-left: 0px; border-bottom-width: 2px; margin-left: 25px; margin-right: 25px; border-color: #999999;}


 Antworten

 Beitrag melden
10.08.2017 20:09 (zuletzt bearbeitet: 10.08.2017 20:13)
avatar  az_
#3
avatar
az_

...nicht schlecht!

...und so schön könnte es aussehen, wenn Du die Schaltfläche für CODE benutzen würdest:

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

/* Abstand zwischen Navigationszeilen kleiner */
.navigation-colors li a:hover, .navigation-colors li a:active, .navigation-colors li a:focus, .navigation-colors li.cc-nav-current > a:link, .navigation-colors li.cc-nav-current > a:visited, .navigation-colors li.cc-nav-parent > a:link, .navigation-colors li.cc-nav-parent>a:visited {
margin-bottom: 0px;
border-bottom-width: 2px;
}
 
.navigation-vertical-alignment a, .navigation-vertical-alignment a:link, .navigation-vertical-alignment a:visited {
margin-bottom: 0px;
border-bottom-width: 2px;
}
 
/* Unterstreichung Subnavi an Breite des Content-Bereichs anpassen */
.jtpl-subnavigation .j-nav-level-1 {
padding-right: 0px;
padding-left: 0px;
border-bottom-width: 2px;
margin-left: 25px;
margin-right: 25px;
border-color: #999999;
}
 
 



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
10.08.2017 20:15
avatar  az_
#4
avatar
az_

ein feines Tool zum Foratieren von CSS ist übrigens dieses hier:

- https://codebeautify.org/css-beautify-minify



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
16.08.2017 11:50
#5
mo

"Beautify", ich bin begeistert.
In Zukunft werde ich auch den "Code" Button nutzen, Danke für die Hinweise.

Liebe Grüße!


 Antworten

 Beitrag melden
17.08.2017 16:06
avatar  az_
#6
avatar
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
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!
Forenspende

 

Spenden über PayPal

Ein Forum zu betreiben, erfordert ein hohes Maß an Zeit, Kraft und Aufmerksamkeit. 

Das Team von Jimdo-Forum arbeitet hinter den Kulissen sehr engagiert daran,
die erforderlichen Aufgaben zu erfüllen, um dir und den
anderen Forenmitgliedern ein tolles Forenerlebnis zu ermöglichen.

 Wir freuen uns, dass du dich dazu entschlossen hast, unser Forum mit deiner Spende zu unterstützen!

...hier ist der direkte Spendenlink
für unsere Kaffeekasse!