Support » Themes » Theme Extension: Header korrigieren

  • Gelöst aurelia33

    (@aurelia33)


    Guten Tag,
    über einen Tipp von Euch würde ich mich sehr freuen.

    MEIN ZIEL: Den Header habe ich über den Customizer eingestellt. Er sollte ganz schmal sein mit der Drei-Streifen-Navigation, wie beim mobilen Endgerät.
    Bild-1-soll-zustand:

    MEIN PROBLEM: Die 3 Unterseiten werden seltsam sortiert unschön im Header ausgeschrieben angezeigt.
    Bild-2-ist-zustand:

    Falls Ihr eine Idee dazu habt, wie ich mein Ziel erreichen kann, freue ich mich über eine Antwort. – Danke im Voraus!

    Viele Grüße
    Jessica

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Hallo,
    teste doch mal bitte unter Design > Customizer > Zusätzliches CSS:

    @media only screen and (max-width: 1980px) {
    .menu-toggle {
        background-color: rgba(0, 0, 0, 0);
        border: 0 none;
        color: #666;
        cursor: pointer;
        display: inline-block;
        font-size: 0;
        margin: 10px auto 0;
        padding: 20px 0;
        width: 30px;
    }
    }

    Entscheidend ist die erste Zeile, bei der ich bezogen auf max-width die maixmale Breite auf 1980px statt 980px geändert habe.
    Viele Grüße,
    Hans-Gerd

    Moderator Angelika Reisiger

    (@la-geek)

    @aurelia33

    was genau möchtest du erreichen? Soll immer das Hamburger-Menü (drei Streifen) angezeigt werden?

    aurelia33

    (@aurelia33)

    Hallo Hans-Gerd (@hage),
    danke für Dein Mitdenken und Deinen Tipp.
    Ich habe das zusätzliche CSS eingefügt (für mich eine Premiere) und veröffentlicht aber leider sehe ich keine Veränderung. Habe ich etwas falsch gemacht? Der Code ist im Quelltext der Seite jetzt sichtbar. Das habe ich überprüft.
    Herzliche Grüße
    Jessica

    aurelia33

    (@aurelia33)

    Hallo Angelika (@la-geek),
    danke für Dein Interesse.
    Ja, das Hamburger-Menü mit den drei Streifen (jetzt weiß ich auch, wie man das nennt – danke!) soll immer angezeigt werden.
    Herzliche Grüße
    Jessica

    Moderator Angelika Reisiger

    (@la-geek)

    Entferne den Code von @hage mal wieder und setz das ans Ende der CSS:

    
    @media only screen and (max-width: 3000px) { 
    .menu-toggle {
    		background-color: rgba(0, 0, 0, 0);
    		border: 0 none;
    		color: #666;
    		cursor: pointer;
    		display: inline-block;
    		font-size: 0;
    		margin: 10px auto 0;
    		padding: 20px 0;
    		width: 30px;
    	}
    
    	.menu-toggle .line-bar:before {
    		transition: top 0.1s ease 0.14s, 
    		opacity 0.1s ease 0s;
    	}
    
    	.line-bar:before {
    		top: -8px;
    	}
    
    	.line-bar:after {
    		bottom: -8px;
    	}
    
    	.line-bar:after, 
    	.line-bar:before {
    		content: "";
    		display: block;
    	}
    
    	.line-bar, 
    	.line-bar:after, 
    	.line-bar:before {
    		border-radius: 5px;
    		height: 2px;
    		position: absolute;
    		transition-duration: 0.15s;
    		transition-property: transform, -webkit-transform;
    		transition-timing-function: ease;
    		width: 30px;
    	}
    
    	.menu-toggle .line-bar:after {
    		transition: bottom 0.1s ease 0.14s, 
    		transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s, 
    		-webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;
    	}
    	.menu-toggle .line-bar {
    		transition-duration: 0.1s;
    		transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    	}
    
    	.line-bar {
    		display: block;
    		margin-top: -2px;
    	}
    
    	.menu-toggle.on .line-bar:before {
    		opacity: 0;
    		top: 0;
    		transition: top 0.1s ease 0s, opacity 0.1s ease 0.14s;
    	}
    
    	.menu-toggle.on .line-bar:after {
    		bottom: 0;
    		transform: rotate(-90deg);
    		transition: bottom 0.1s ease 0s, 
    		transform 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.14s, 
    		-webkit-transform 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.14s;
    	}
    
    	.menu-toggle.on .line-bar {
    		transform: rotate(45deg);
    		transition-delay: 0.14s;
    		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    	}
    	
    	.menu {
    		display: none;
    	}
    
    	.toggled-on .menu {
    		display: block;
    		padding: 0 10px;
    	}
    	
    	.widget_nav_menu .menu {
    		display: block;
    	}
    
    	.sub-menu-toggle {
    		background-color: #333;
    		color: #fff;
    		float: right;
    		width: 30px;
    		height: 30px;
    		text-align: center;
    		line-height: 30px;
    		margin: 6px;
    		cursor: pointer;
    		position: relative;
    		z-index: 9;
    	}
    	
    	.main-navigation {
    		float: none;
    		padding: 0;
    		margin: 0 80px 0 0;
    		text-align: right;
    	}
    	
    	.main-navigation > ul > li {
    		position: inherit;
    		width: 100%;
    		border-top: 1px solid rgba(0, 0, 0, 0.1);
    		margin-left: 0;
    	}
    	
    	.main-navigation > ul > li::before {
    		visibility: hidden;
    	}
    	
    	.main-navigation a {
    		float: none;
    		height: inherit;
    		line-height: 1.833;
    		padding: 10px 0;
    	}
    }
    
    

    Einfach alles komplett kopieren und einfügen.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)