[gelöst] Menue soll wenn es collapst eine Farbe bekommen

Emess · 8. Juni 2023

Habe mal wieder ein nettes Übungsproblem.

Menue soll wenn es collapst eine Farbe bekommen. Jetzt ist es weiß und egal was ich mache es bleibt weiß.

Link

my2.emess62.de/

Sempervivum · 8. Juni 2023

Da gibt es schon diverse Mediaqueries mit "min-width: 767". Gib dem Menü die Farbe, die Du dir wünschst und in der Mediaquery setze sie wieder auf transparent.

Emess · 8. Juni 2023

Zitat von Sempervivum

Da gibt es schon diverse Mediaqueries mit "min-width: 767". Gib dem Menü die Farbe, die Du dir wünschst und in der Mediaquery setze sie wieder auf transparent.

das verstehe ich nicht so richtig

hier

Code

@media(min-width:768px) {
    .custom-navbar {
      border-bottom: 0;
      background: 0 0; 
    }

hatte ich schon mit farben experimentiert aber ohne erfolg.

bedeutet background: 0 0; transparenz?

Sempervivum · 8. Juni 2023

Es gibt eine Standardfarbe "transparent", damit kannst Du den Hintergrund transparent machen:

Code

@media(min-width:768px) {
    .custom-navbar {
      border-bottom: 0;
      background-color: transparent; 
    }

Natürlich kann man die Farbe auch noch flexibler fest legen, siehe hier:

Grafik/Farbe – SELFHTML-Wiki

Emess · 9. Juni 2023

Ich verstehe das scheinbar gar nicht.

mein collaps.css

Code

 @media(min-width:768px) {
    .custom-navbar {
      border-bottom: 0;
      background: 0 0; 
    }

    .custom-navbar.top-nav-collapse {
      background: #ffffff;
      -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
      box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
      padding: 12px 0;
    }

    .top-nav-collapse .navbar-brand {
      color: #454545;
     
    }

    .top-nav-collapse .nav li a {
      color: #575757;
    }

    .top-nav-collapse .nav .section-btn a {
      color: #ffffff;
     
    }
  }

Alles anzeigen

egal was ich da auch ändere der background des menüs bleibt weiß.

Ich blick da nicht so richtig durch. Eigentlich gar nicht.

Sempervivum · 9. Juni 2023

Du musst zunächst für die mobile Ansicht die gewünschte Farbe setzen und dann in der Mediaquery für breiten Bildschirm wieder transparent machen:

Code

/* Außerhalb der Mediaquery setzen wir die gewünschte Farbe*/
section.navbar.custom-navbar.navbar-fixed-top {
    background-color: lightblue;
}

/* Und schalten wieder auf transparent wenn das Browserfenster
breit ist */
@media(min-width:768px) {
    .custom-navbar {
      border-bottom: 0;
      background-color: transparent; 
    }
/* usw. */

Alles anzeigen

Emess · 9. Juni 2023

Bei mir geht das leider nicht. Wie gesagt in der Desktopansicht soll der BG transparent sein und in der Mobilansicht so komisches Gelb.

Siehe

https://my2.emess62.de/

die CSS

Code

.custom-navbar .navbar-toggle {
    border: none;
    padding-top: 10px;
  }

  .custom-navbar .navbar-toggle {
    background-color: transparent;
  }

  .custom-navbar .navbar-toggle .icon-bar {
    background: #252525;
    border-color: transparent;
  }
  section.navbar.custom-navbar.navbar-fixed-top {
    background-color: #e0aa15;
}

  @media(min-width:768px) {
    .custom-navbar {
      border-bottom: 0;
      background-color: transparent; 
    }
   
    .custom-navbar.top-nav-collapse {
      background: #ffffff;
      -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
      box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
      padding: 12px 0;
    }

    .top-nav-collapse .navbar-brand {
      color: #454545;
     
    }

    .top-nav-collapse .nav li a {
      color: #575757;
    }

    .top-nav-collapse .nav .section-btn a {
      color: #ffffff;
     
    }
  }

Alles anzeigen

hmm. ich verzweifel daran. Wahrscheinlich habe ich die nav kaputt gecodet

Sempervivum · 9. Juni 2023

Nein, nix kaputt gecodet. Es sind zwei Ursachen warum es nicht funktioniert:

1. Der Selektor, den ich dir gegeben habe, ist zu spezifisch. Ändere ab Zeile 300 so:

Code

.custom-navbar {
    background-color: #e0aa15;
}

2. Die Farbe wird ab Zeile 949 durch weiß überschrieben. Deaktiviere das:

Code

@media only screen and (max-width: 767px)
.custom-navbar {
    /* background: #ffffff; */
    -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    text-align: center;
}

Emess · 9. Juni 2023

Sehr vielen Dank!

In Zeile 949 hätte ich in hundert Jahren nicht nachgeschaut

Sempervivum · 9. Juni 2023

Ich auch nicht aber der HTML-Inspektor hat mir das präzise angezeigt. Kennst Du den schon?

Emess · 12. Juni 2023

Zitat von Sempervivum

Ich auch nicht aber der HTML-Inspektor hat mir das präzise angezeigt. Kennst Du den schon?

Nein den kenne ich nicht. Habe den Webdeveloper als plugin für Chrome, Brave und FF.

Der scheint nur für Android zu sein?

Sempervivum · 12. Juni 2023

Den Webdeveloper kenne ich jetzt wiederum nicht, wahrscheinlich ist das dieses:

Web Developer

Adds a toolbar button with various web developer tools.

chrome.google.com

Der HTML-Inspektor ist nicht für Android sondern ein Bestandteil der Entwicklerwerkzeuge und die sind in jedem gängigen Desktop-Browser integriert. Mach mal einen Rechtsklick auf ein Element auf deiner Webseite und wähle "(Element) untersuchen", dann öffnet sich ein neues Fenster und Du siehst das HTML und CSS. Gibt noch mehr nützliche Werkzeuge in den einzelnen Tabs.

Emess · 12. Juni 2023

Ahh! Interessant! Danke

[gelöst] Menue soll wenn es collapst eine Farbe bekommen

Emess 12. Juni 2023

Jetzt mitmachen!

Teilen

Tags