Wie ändere ich die Farbe für ein aktives Navigationsfeld im CSS?

... komplette Frage anzeigen

4 Antworten

li:active, wenn keine neue Seite geladen wird und wenn, dann gibt in der neuen html-Datei (z.B. impressum.html) einfach dem bestimmten li eine Farbe. Entweder mit einer eigenen Klasse oder über li:nth-child(x) {}

x durch Nummer ersetzen. 3. li im Menü wäre entsprechend nth-child(3).

Antwort bewerten Vielen Dank für Deine Bewertung

Klasse bzw. Id des Menüfeldes und dort dann eingeben:

.Klasse:hover {

background-color: red;

}

.Klasse ist ersetzbar mit #id
und die Farbe kannst du auch aussuchen

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von MarcoRP
01.09.2016, 15:48

Kann ich die den einfach überall einfügen? Oder muss da eine kausale Verkettung entstehen?

0
Kommentar von Manumaster97
01.09.2016, 16:30

Ich glaube mit aktiv meint er nicht das hovern sondern wenn er auf der Home Page ist, dass Home anders eingefärbt ist

In vielen Themes ist das mit der Klasse active geregelt

0

Wo überall steht im CSS-Quelltext was von 2E8670 (die Farbe des grünen Hintergrundes und des "HOME"-Schriftzuges)?

Irgendwo müsste das als Textfarbe stehen - diese solltest du ändern können.

Oder/und du suchst nach 8FDAC7 (die hellgrüne Farbe bei Mouseover) und änderst auch die Hintergrundfarbe des aktiven Feldes.

Du könntest auch das komplette CSS irgendwohin hochladen und verlinken.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von MarcoRP
01.09.2016, 15:46

Das ist ja das Komische. Den Farbcode "2E8670" habe ich nur ein einziges Mal im CSS selber – im Footer. Von mir selber auch eingefügt.

Die restlichen Farben kann man über ein Interface im Backend unter dem Reiter "Design" angeben. Da fehlt aber einfach die Option für das Ändern der Farbe für aktive Navi-Felder. Daher muss ich direkt ins CSS, wo aber der Farbcode eben nicht mehr aufgezeigt wird. Daher dachte ich, lässt sich über eine Codierung wie etwa

.font color aktive navigation  {fffff} (frei erfunden, für mich ist programmieren Neuland)

künstlich schnell sowas einfügen.

0

Code oder Link bitte

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von MarcoRP
01.09.2016, 15:23

/**
* 2.3. =Navigation
* ----------------------------------------------------------------------------
*/
.navigation {
background-color: #19232d;
border-bottom: 2px solid #2f4154;
color: #efefef;

text-transform: uppercase;

box-sizing: border-box;
-moz-box-sizing: border-box;
}

.sticky-nav {
position: fixed;
top: 0;
z-index: 101;
width: 1078px;
background-color: rgba(25, 35, 45, 0.9);

-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;

-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

.has-nav-light .sticky-nav {
width: 1128px;
background: rgba(255, 255, 255, 0.98);
}

.full.has-nav-full .sticky-nav {
width: 100%;
}

.navigation.has-search .menu {
padding-right: 54px;
}

.admin-bar .sticky-nav { top: 32px; }

.navigation .mobile, .navigation .off-canvas {
display: none;
}

}
.navigation a { color: #efefef; }

.navigation .mobile, .navigation .mobile-menu { display: none; }

.navigation ul {
list-style: none;
line-height: 2;
position: relative;
}

.navigation ul li {
float: left;
}

/* nth level link */
.navigation .menu li > a {
float: left;
padding: 0px 25px;
}

/* top level links - 45px total height */
.navigation .menu > li > a {
text-decoration: none;
line-height: 43px;

border-bottom: 2px solid transparent;
margin-bottom: -2px; /* parent border offset */
}

/* blips for parent menus */
.navigation .menu li > a:after {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 0.9;
content: "\f107";
text-shadow: 0px 0px 1px #efefef;
margin-left: 10px;
}

.navigation .menu li li > a:after { display: none; }
.navigation .menu li > a:only-child:after, .navigation .menu .only-icon > a:after {
display: none;
}

.navigation .menu > li:first-child > a {
border-left: 0;
box-shadow: none;
}

.navigation .menu > li:hover > a,
.navigation .menu > .current-menu-item > a,
.navigation .menu > .current-menu-parent > a,
.navigation .menu > .current-menu-ancestor > a {
border-bottom: 2px solid #e54e53;
}

.navigation .menu > li:hover {
background: #1e2935;
}

.navigation .menu-item > a .fa, .navigation .sub-menu .fa {
font-size: 14px;
margin-right: 7px;
}

.navigation .menu .fa.only-icon, .navigation .only-icon .fa {
margin-right: 0;
}

/* login */
.menu .user-login { float: right; }

.navigation .menu .user-login a {
float: right;
background: #2A3746;
padding: 0 21px;
min-width: 12px;
}

.navigation .menu .user-login .fa {
margin: 0;
}

.navigation.nav-light .menu .user-login a {
background: transparent;
border: 0;
}

.navigation .user-login .text { display: none; }

/* Nested menus */

/* 1st level */
.navigation .menu > li > ul {
top: 45px;
border-radius: 0;
border: 0;
}

/* 1st to nth level links */
.navigation .menu > li li a {
float: none;
display: block;
text-decoration: none;
font-size: 13px;
padding: 6px 25px;
border-top: 1px solid #1f2c38;
text-transform: none;

/* prevent visibility:hidden delays
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;*/
}

.navigation .menu ul li {
float: none;
min-width: 220px;
border-top: 0;
padding: 0 0;
position: relative;

-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}

.navigation .menu ul > li:first-child > a {
border-top: 0px;
box-shadow: none;
-webkit-box-shadow: none;
}

.navigation .menu ul {
position: absolute;
overflow: visible;
visibility: hidden;
display: block;
opacity: 0;

padding: 5px 0px;
background: #19232d;

-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;

z-index: 100;
pointer-events: none;
}

/* 2nd+ level */
.navigation .menu ul ul {
left: 100%;
top: 0;
}

.navigation li:hover > ul {
visibility: visible;
opacity: 1;
pointer-events: auto;
}

/* nth level hover or current active item */
.navigation .menu li li:hover, .navigation .menu li li.current-menu-item {
background: #1e2935;
}

0

Was möchtest Du wissen?