Schatten um die Buttons in der Navigation

08.02.2019 13:14

chris37170
#1

Hallo Miteinander,

ich habe über dieses Forum viel gelernt um unsere Dorf-Homepage www.dinkelhausen.eu anzupassen und einen etwas moderneren Look zu geben. Ich habe deshalb eine Frage zur Navigation als nice to have. In der Navigation sind die Buttons sowhl in der Navigation als auch in der Seitenleiste flach dargestellt. Gibt es hier eine Möglichkeit über CSS im Head Bereich diese mit einem Schatten zu versehen, so dass diese etwas moderner herüberkommen? Ich habe schon im Forum und im I-Net geschaut, bin aber nicht fündig geworden.
Design: St. Petersburg

Mfg

Christoph

Hier der bisherige Code des Head

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
43
44
45
46
47
48
49
50
 

 
<style type="text/css">
/*<![CDATA[*/
/* Änderungsschema für ST. PETERSBURG */
 
  /* .jtpl-navigation__inner {
        padding-left: 328px; position:fixed; top:2px; z-index: 9998
  } */
  .jtpl-section {
        max-width: 1280px!important; 
  }        
  .jtpl-footer {
        height: 50px!important;
        padding-bottom: 40px!important;
  }  
  
@media (min-width:768px) {
    .jtpl-navigation {
                          
        position: fixed;
        width: 100vw;
        padding: 32px 0 ; 
        top: 0; 
        z-index: 9999;
        }
     .jtpl-navigation__inner {
        position:fixed; 
        top:0; 
        z-index: 9999
        }
 
     .jtpl-section {
        margin-top: 90px; /* Abstand zu den Buttons */
        margin-left: 30px;
        margin-right: 50px;
        }
        
        .navigation-colors {
                -webkit-box-shadow: 0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                -moz-box-shadow:    0px 10px 15px 0px rgba(50, 50, 50, 0.75);
                 box-shadow:        0px 10px 15px 0px rgba(50, 50, 50, 0.75);
        }        
        
} 
 
/*]]>*/
</style>
 

 

Antworten

Beitrag melden

#2

10.02.2019 11:50 (zuletzt bearbeitet: 10.02.2019 11:51)

az_
#2

az_

Hallo @chris37170,
...Dein Script ist schon fast richtig. Ergänze es hiermit:

1
2
3
4
5
6
7
8
9
 
.navigation-colors a, .navigation-colors a:link, .navigation-colors a:visited {
    font-weight: normal;
    font-style: normal;
    color: #000;
    background-color: #6da7de;
    -webkit-box-shadow: 0px 10px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 10px 15px 0px rgba(50, 50, 50, 0.75);
     box-shadow:        0px 10px 15px 0px rgba(50, 50, 50, 0.75);
}
 

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

#3

10.02.2019 12:12

chris37170
#3

chris37170

Herzlichen Dank,

für die Hilfe, es funzt einwandfrei. Es wäre schön, wenn es nun auch noch möglich wäre dies auf die Buttons der Navigation zu erweitern.

Mfg

Christoph