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!