Cambium Theme Header verkleinern?

phil21oo

Hallo, meine Frage lautet, wie kann ich die breite und höhe der Menüleiste meiner Website ändern (Cambium Theme) [Blockierte Grafik: http://www.forum-hilfe.de/images/smilies/icon_question.gif] Einerseits ohne scrollen und andererseits beim scrollen? Und wie kann ich das Logo während dem Scrollen größer darstellen?

Hier meine Website: https://setup-tipps.com und unten der Code:

Habe schon einige Dinge versucht, allerdings ändert sich irgendwie nichts.

Vielen Dank für deine Hilfe[Blockierte Grafik: http://www.forum-hilfe.de/images/smilies/smile.png]

Phil

Code:

Code

8.2 - Header Menu
--------------------------------------------------------------*/
/* Header Menu */
.site-header-menu {
  display: none;
}




/*--------------------------------------------------------------
8.3 - Header Menu Responsive
--------------------------------------------------------------*/
/* Toogle Menu */
.toggle-menu-wrapper a, .toggle-menu-wrapper a:visited {
  color: #020202;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}




.main-navigation.stuck .toggle-menu-wrapper a, .main-navigation.stuck .toggle-menu-wrapper a:visited {
  color: #fff;
}




.toggle-menu-wrapper a:hover, .toggle-menu-wrapper a:focus, .toggle-menu-wrapper a:active {
  color: #3d3d3d;
}




.main-navigation.stuck .toggle-menu-wrapper a:hover, .main-navigation.stuck .toggle-menu-wrapper a:focus, .main-navigation.stuck .toggle-menu-wrapper a:active {
  color: #a6a6a6;
}




.toggle-menu-wrapper a:before {
  content: "\f0c9";
  font-size: 25px;
  font-size: 1.5625rem;
  vertical-align: middle;
}




.toggle-menu-wrapper .toggle-menu-label {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 5px;
  margin: 0 0.3125rem;
  text-transform: uppercase;
}




/* Body Control */
body.has-responsive-menu {
  overflow: hidden;
}




/* Site Header Menu Responsive */
.site-header-menu-responsive {
  background: #141414;
  color: #fff;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
  padding: 30px;
  padding: 1.875rem;
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  z-index: 99999;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}




.site-header-menu-responsive.show {
  left: 0;
}




.site-header-menu-responsive .header-menu-responsive-close {
  color: #fff;
  cursor: pointer;
  font-size: 35px;
  font-size: 2.1875rem;
  line-height: 1;
  position: absolute;
  top: 5px;
  right: 15px;
}




.site-header-menu-responsive .header-menu-responsive-close:hover {
  color: #a6a6a6;
}




/* Responsive Menu: (375px) and up */
[url='https://wpde.org/system/user/?userID=10206']@Media[/url] (min-width: 375px) {
  .site-header-menu-responsive {
   left: -335px;
   width: 335px;
  }
}




/* Responsive Menu: (414px) and up */
[url='https://wpde.org/system/user/?userID=10206']@Media[/url] (min-width: 414px) {
  .site-header-menu-responsive {
   left: -375px;
   width: 375px;
  }
}




/* Header Menu Responsive */
.header-menu-responsive {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}




.header-menu-responsive * {
  list-style: none;
  margin: 0;
  padding: 0;
}




.header-menu-responsive ul {
  display: none;
  margin-left: 24px;
  margin-left: 1.5rem;
}




.header-menu-responsive ul.toggle-on {
  display: block;
}




.header-menu-responsive li {
  position: relative;
  word-wrap: break-word;
  white-space: normal;
}




.header-menu-responsive li.current_page_item a,
.header-menu-responsive li.current-menu-item a,
.header-menu-responsive li.current_page_ancestor > a,
.header-menu-responsive li.current-menu-ancestor > a,
.header-menu-responsive li.current-menu-parent > a {
  color: #a6a6a6;
}




.header-menu-responsive a, .header-menu-responsive a:visited {
  color: #fff;
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 0;
  padding: 0.5rem 0;
  text-transform: uppercase;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}




.header-menu-responsive a:hover, .header-menu-responsive a:focus, .header-menu-responsive a:active {
  color: #a6a6a6;
}




.header-menu-responsive .dropdown-toggle {
  background: transparent;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
}




.header-menu-responsive .dropdown-toggle:after {
  font-size: 16px;
  font-size: 1rem;
  color: #fff;
  content: "\f078";
}




.header-menu-responsive .dropdown-toggle.toggle-on:after {
  content: "\f077";
  color: #a6a6a6;
}




.header-menu-responsive .page_item_has_children > a,
.header-menu-responsive .menu-item-has-children > a {
  padding-right: 40px;
  padding-right: 2.5rem;
}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Henk1060

gute morgen.

würde einmal das logo richtig zuschneiden, da rundherum viel leer raum ist.

beim scrollen logo
ist diese css zuständig

Code

@media (min-width: 1200px)
.stuck-do .custom-logo {
    max-height: 80px;
}

phil21oo

Danke, wo muss ich den code einfügen?

Und das Problem ist, dass da Logo nach dem Zuschneiden noch viel fetter wird.

SirEctor

Versuch mal das in Design -> Customizer -> zusätzliches CSS

Code

@media all and (min-width: 1200px){
.stuck-do .custom-logo {
    margin: -40px;
    max-height: 160px;
}
}

@Henk1060: du vergisst beim Kopieren die { und } für den Media-Query ;-)

Henk1060

code unter design customizer.

n

phil21oo

Es funktioniert, super, danke euch!:)

Aber wie kann ich die Höhe des Headers generell verkleinern?

Und wie kann ich das Logo in der mobilen Ansicht größer darstellen?

Das sind meine letzten Fragen, dann lass ich euch wieder in Ruhe!o_O

Henk1060

schon mal goo gefrag? Cambium Theme header höhe

phil21oo

Ja, aber da hab ich nichts gefunden:(

SirEctor

Zitat von phil21oo

Aber wie kann ich die Höhe des Headers generell verkleinern?

Das liegt an deinen Logo. Das hat überall sehr viel Rand und macht so den Header unnötig hoch.

Quick&Dirty ginge z. B. so

Code

@media all and (min-width: 1200px) {
.custom-logo {
    margin: -45px;
}
}

Aber du solltest wirklich mal dein Logo bearbeiten. Ich habe außerdem gesehen, dass das Bild 2900px breit ist und per CSS auf 290px runter gerechnet wird. Das solltest du ändern.

phil21oo

Durch das Theme wird das Logo ohne Rand, meiner Meinung nach viel zu groß dargestellt, deswegen hab ich den Rand nicht abgeschnitten.

ich möchte generell das Logo so groß wie es jetzt mit Rand ist und den Header kleiner.

Vielen Dank

SirEctor

Was hast du schon versucht? Das Logo kleiner zu machen?

phil21oo

Durch das Theme wird das Logo ohne Rand, meiner Meinung nach viel zu groß dargestellt, deswegen hab ich den Rand nicht abgeschnitten.

ich möchte generell das Logo so groß wie es jetzt mit Rand ist und den Header kleiner.

Das Ziel wäre jetzt generell das Logo im Theme zu verkleinern, sodass ich den weißen Rand vom aktuellen Logo abschneiden kann. Somit müsste der Header auch insgesamt kleiner werden, oder?

Vielen Dank

SEpp55

Stelle bitte das Logo einmal wie schon aufgefordert ohne zu viel Rand auf die Seite.
Das dann wieder verkleineren, so dass dir die Größe gefällt, ist der zweite Schritt.
Danach könnte man in den Zusätzlichen CSS versuchen, das mit nachfolgender Anweisung zu verkleineren. Das klappt auch derzeit mit dem Logo.

Code

@media all and (min-width: 1200px) {
.custom-logo {
    max-height: 100px;
    }
}

Anstatt der 100px ist natürlich auch ein anderer Wert möglich.

phil21oo

Ich habs jetzt zugeschnitten und den css Code eingefügt (max-height: 80px), sieht jetzt schon mal besser aus! Danke!:)

Vielleicht könnte ihr mir noch helfen, die Header Höhe beim Scrollen ein bisschen zu verkleinern und die generelle Höhe des Headers bzw. des Abstandes vom Logo zum dunkel grauen.

Vielen Dank!

SEpp55

So, nun folgendes wieder in die Zusätzlichen CSS

Code

.has-site-branding .site-header.stuck-do, .wp-custom-logo .site-header.stuck-do {
    padding: 0;
}
.has-site-branding .site-header {
    padding: 0;
}
.has-site-branding .site-header, .wp-custom-logo .site-header {
    min-height: 100px;
}

Responsivität noch nicht inkludiert ;-) unter 1200px ist es noch zu groß!
Aber für mich heute nicht mehr ;-)

phil21oo

WoW, absolut genial! Sieht super aus!

Vielen Vielen Vielen Dank!:):):)

SEpp55

Damit es für uns auch besser aussieht, schalte mal die beschleunigungs- und optimierungs-Plugins, wie Autoptimizer und a3 Lazy Load ab. So wie derzeit ist es sehr mühsam die Einzelheiten strukturiert zu sehen.
Versuche mal z.B. mit SRTG+U im Quelltext etwas zu finden... ;)

phil21oo

Ich versteh nicht ganz was Du meinst, aber hab die plugins mal abgeschaltet.

SEpp55

Zitat von phil21oo

Ich versteh nicht ganz was Du meinst, aber hab die plugins mal abgeschaltet.

Wenn du z.B. mit dem Firefox STRG+U drückst und dir die Seite mir dem Quelltext ansiehst und danach das noch einmal mit den eingeschalteten Plugins machst kannst du den Unterschied sehen. Genau so sehen die diversen CSS-Angaben aus.
Wie auch immer!
Versuche mal nachstehende Anweisungen in die Zusätzlichen CSS anstatt der bisherigen einzufügen.

Code

.custom-logo {
    max-height: 80px;
    }
.has-site-branding .site-branding-wrapper, .wp-custom-logo .site-branding-wrapper,
.has-site-branding .site-header.stuck-do, .wp-custom-logo .site-header.stuck-do {
    padding: 0;
    height: 85px;
}
.has-site-branding .site-header {
    padding: 0;
}
.has-site-branding .site-header, .wp-custom-logo .site-header,
.has-site-branding .site-header, .wp-custom-logo .site-header {
    min-height: 90px;
}
.site-content .site-content-inside {
    padding: 0;
}

Alles anzeigen

phil21oo

Hab den Code eingefügt, sieht auch super aus, obwohl ich es mit ein bisschen Abstand zwischen den Beiträgen und dem Header besser finde!

Vielen Vielen Vielen Dank:):):)o_O

Ich werde einfach den anderen Code nehmen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Cambium Theme Header verkleinern?

Jetzt mitmachen!