Hauptnavigation untereinander | Child-Theme von Twenty-Thirteen

pixselig

Hi
ganz einfach -> gib dem header ein eigenes backgroundimage! Eventuell musst du dich dann auch noch mit dem z-index spielen.
Die position des Menüs hast du jetzt aber ganz anders umgesetzt als ich sie dir beschrieben habe -> funktioniert auch. Allerdings mit Nachteilen: wenn du jetzt den header fixierst, fixierst du damit auch die navbar sodass der footer unschön drunterrutscht. dies lässt sich so einfach auch nicht mit einem backgroundimage verändern.
LG, pixselig

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

SirEctor

Du könntest bei #page das background-attachment auf fixed setzen. Dann den Teil des Hintergrundbildes für den site-header kopieren und als bg im site-header definieren und dann über z-index diesen immer als oberste Ebene anzeigen lassen.

SirEctor

Zitat von pixselig

Allerdings mit Nachteilen: wenn du jetzt den header fixierst, fixierst du damit auch die navbar sodass der footer unschön drunterrutscht.

pixelig hat recht. Ich würde den Div für die Navbar auch nicht im <header> definieren.

achisto

Hallo,

Zitat

ganz einfach -> gib dem header ein eigenes backgroundimage! Eventuell musst du dich dann auch noch mit dem z-index spielen.

Der Header hat ein eigenes Backgroundimage. Das Logo (Schulgebäude mit Schrift und Kindern), der Schriftzug und die Sonne sind zusammen das Backgroundimage. Nur hat dieses keinen Hintergrund ist also transparent. Die Image ansich hat auch keinen Hintergrund.

Der Code dazu:

CSS

.site-header {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url(images/circle.png)!important;
    background-origin: padding-box;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}


.site-header {
    width: 100%;
    height: 400px;
    margin-bottom: -120px;
}

Alles anzeigen

Zitat

Du könntest bei #page das background-attachment auf fixed setzen. Dann den Teil des Hintergrundbildes für den site-header kopieren und als bg im site-header definieren und dann über z-index diesen immer als oberste Ebene anzeigen lassen.

Hat ich ganz am Anfang probiert. Als ich den Theme begonnen habe. Die Umsetzung war naja. Durch die einzelnen Lichtstrahlen im BG-Image war es schwer genau die selben mit der identischen größe und position zu machen. Daher hab ich diesen Lösungansatz nicht weiterverfolgt.

Ich hab nun probiert in der header.php die navbar aus dem <header> herauszulösen und darunter zu erstellen. Klappt auch. Nur das dadurch der komplette Site-Content nach unten rutscht und sich nicht bewegen lässt.

CSS

.entry-header,
.entry-content,
.entry-summary,
.entry-meta {
    margin: 0 auto;
    max-width: 700px;
    width: 100%;
    position: relative;
    left: 5% !important;
}

Durch "top: XX% !important;" hatte ich versucht den ganzen Inhalt nach oben zu verschieben- Der top-Wert ist in der aktuellen CSS Datei nichtmehr erhalten, da er nichts verändert hat.
Würde es was ändern wenn ich die Navbar nach unten verschieb? Oder würde das am Content nichts ändern?

Vielen Dank euch beiden für die Hilfe bis jetzt
Mit freundlichen Grüßen

pixselig

Zitat von achisto

Ich hab nun probiert in der header.php die navbar aus dem <header> herauszulösen und darunter zu erstellen. Klappt auch. Nur das dadurch der komplette Site-Content nach unten rutscht und sich nicht bewegen lässt.

Das ist nicht ganz das was ich gemeint habe -> siehe dazu meinen post: http://forum.wpde.org/design/120444-…html#post522204
hinzu kommt, dass du mit diesem von mir genannten Link die Sidebar nach links verschieben musst -> Link: https://wordpress.org/support/topic/…left-of-content

Weiters ist dann zu beachten, dass du im Dashboard das two-column-Design wählen bzw die Sidebar aktivieren musst.

Das ist die, wie ich finde (für diesen Aufwand), sauberste Lösung!

LG, pixselig

PS: wenn du das so umsetzt kannst du auch den Header fixieren und den Hintergrund so wie SirEctor geschrieben hat umsetzen.

achisto

Zitat von pixselig

PS: wenn du das so umsetzt kannst du auch den Header fixieren und den Hintergrund so wie SirEctor geschrieben hat umsetzen.

Ich habe es nun so probiert wie SirEctor es beschrieben hat. Ich hab den Background-image einen Hintergrund verpasst. Und das position: fixed; fest an die Position gesetzt. Zuvor habe ich auch die navbar aus dem <header> entfernt und darunter eingefügt.

Das Ergebnis ist nicht gerade perfekt. Kann mir da jemand noch helfen? Die Navigation muss ebenso wie der Header an der selben Stelle bleiben. Es funktioniert nichts was ich ausprobier. Ich kann weder die navbar noch den site-content irgendwie nach unten bewegen. Gibt es da eine Möglichkeit das zu ändern?

Vielen Dank im Voraus
Mit freundlichen Grüßen

//EDIT: Die Navi konnte ich inzwischen verschieben und auch an der Stelle festmachen. Das einzige Problem das noch immer besteht ist der Content der nicht nach unten geht?

pixselig

Gib dem main-Div ein padding-top
Also ca.

Code

#main {padding-top: 250px;}

-- eigentlich würde ich das mittels "margin-top" lösen, dann rückt dir allerdings auch die headergrafik herunter...

LG

achisto

Vielen Dank.

Mit "margin-top" war auch einer meiner Versuche. Nur das ich die ganze Zeit über den ".site-content" angesprochen habe und dort versucht habe mein Ziel zu erreichen. Was aber nicht geklappt.

Inzwischen hat alles geklappt. Nur ist mit beim ersten drüberschauen auf einem größeren Bildschirm etwas seltsames aufgefallen. Das Background-image ist Link, Rechts und Unten zu kurz. Die Breite des Bildes beträgt 1080px und die höhe ist etwas mehr als 1920px.

Hiermit hab ich das Bild eingefügt:

CSS

#page, hfeed site {
    margin: 0;
    padding: 0;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url(images/bg.png)!important;
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    background-position: botton left;
    margin: 0px auto;
    position: relative;
}

Alles anzeigen

Ich hab es eben auch kurz getestet indem ich das Bild in den Body einfüg. Dort hat dann alles wunderbar funktioniert, nur das dann eben dort wo vorher noch das Bild war eine Weiße Fläche zu sehen war.
Ich wäre dankbar wenn mit nochmal jemand helfen könnte und evenutell das noch zeigen könnte wie ich das verändern kann in WP?

Vielen Dank im Voraus
Mit freundlichen Grüßen

SirEctor

Du müsstest bei .site die max-width raus nehmen.

Und #page würde ich background-attachment: fixed; geben

achisto

Hat geklappt.
Vielen Dank.

achisto

Das letzte Problem für heute und hoffentlich auch für die nächste Zeit.
Das Submenü muss den abstand noch etwas veringert werden. Ich hab es probiert indem ich in ".submenu" mit padding und margin probiert habe den Abstand etwas zu veringern. Funktioniert alles nicht. Kann ich das Submenu überhaupt noch bearbeiten? Oder ist es durch die einzelnen Grafiken nichtmehr veränderbar? Auch konnte ich die Größe des Submenu nicht anpassen. Sollte eigentlich etwas kleiner sein. DIe Änderung wurde aber nicht angenommen:
Zusammenhängend mit der Navigation gibt es noch ein Problem. Undzwar mit dem Content. Auf einem kleinen Bildschirm ist er zu nahe an der Navigation und bei einem größeren Bildschirm ist der Content Bereich wiederrum zuweit weg von der Navi. Ich hatte durch prozentangaben probiert es irgendwie an die Bildschirmgröße anzupassen. Hat aber anscheinend nicht funktioniert. Ich wäre wieder dankbar für jede Hilfe.

Vielen Dank
Mit freundlichen Grüßen

//EDIT: Satz hinzugefügt

pixselig

Probiers mal mit

Code

.sub-menu li {height: 25px;}

Zu zweiterem Problem: auf die schnelle fällt mir da keine Lösung ein, da sich die Positionierung am Header ausrichtet! Du hättest das Problem aber nicht, wenn du es so wie ich es dir schon beschrieben habe umgesetzt hättest. Aber ok, dass hilft dir jetzt auch nicht...

achisto

Danke!
Ich hatte bisher nur .sub-menu und .sub-menu a angesprochen.

Zum zweiten Problem: Wenn es nicht anders geht, werd ich wohl doch die erste von der beschriebene Möglichkeit umsetzten müssen und die Navigation in die Sidebar packen und es dort drüber lösen. Ich hab ja noch die ganzen Links. Werd ich mich morgen mal ransetzen und sollte da noch fragen auftauchen hier schreiben.

Vielen Dank für die freundliche Hilfe
Mit freundlichen Grüßen

achisto

Guten Morgen,

ich hab nun die Möglichkeit von pixselig mit der Sidebar umgesetzt bzw. versucht umszusetzen. Nur glaub ich ist das nicht so nicht ganz richtig?

Es wird das Hintergrund-Bild nichtmehr angezeigt; Die Navigation wird noch immer im Header angzeigt obwohl sie nichtmehr in der header.php vorhanden ist.

Ist das soweit alles richtig? Und ich muss einfach das CSS erneut anpassen? Oder ist mir da ein kleiner Fehler unterlaufen? Ich wollte mich nun erstmal versichern bevor ich weitermach und am Ende ist es falsch.

Vielen Dank
Mit freundlichen Grüßen

Edit: Und das komplette slide-menu funktioniert in der sidebar nichtmehr.

pixselig

Das Prinzip ist das richtige -> nur leider hast du den Code nicht richtig ausgeschnitten und wieder eingesetzt. Sichere einmal deine header.php und sidebar.php und versuche es mit meinen abgeänderten ->

header.php

PHP

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>


<body <?php body_class(); ?>>
    <div id="page" class="hfeed site">
        <header id="masthead" class="site-header" role="banner">
            <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            </a>
        </header><!-- #masthead -->


        <div id="main" class="site-main">

Alles anzeigen

sidebar.php

PHP

<?php
/**
 * The sidebar containing the secondary widget area, displays on posts and pages.
 *
 * If no active widgets in this sidebar, it will be hidden completely.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */


if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
    <div id="tertiary" class="sidebar-container" role="complementary">
        <div class="sidebar-inner">
            <div id="navbar" class="navbar">
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                    <?php get_search_form(); ?>
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->
            <div class="widget-area">
                <?php dynamic_sidebar( 'sidebar-2' ); ?>
            </div><!-- .widget-area -->
        </div><!-- .sidebar-inner -->
    </div><!-- #tertiary -->
<?php endif; ?>

Alles anzeigen

LG, pixselig
PS: bitte jeweils den GANZEN obigen Code in die neuen header.php und sidebar.php kopieren!

achisto

Vielen Dank. Nun wird alles wieder angezeigt.
Nur die Navigation ansich funktioniert noch immer nicht richtig.
Es ist ja nun alles richtig wieder in den Dateien vorhanden durch deinen Code. Was muss den an der Navigation noch eingestellt bzw. verändert werden damit das sub-menu nur beim hover angezeigt wird?

Vielen Dank
Mit freundlichen Grüßen

pixselig

Tu mir noch einen Gefallen bitte,
Ändere die Sidebar.php nochmals in:

PHP

<?php
/**
 * The sidebar containing the secondary widget area, displays on posts and pages.
 *
 * If no active widgets in this sidebar, it will be hidden completely.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */


if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
    <div id="tertiary" class="sidebar-container" role="complementary">
        <div class="sidebar-inner">
            <div class="widget-area">
                <?php dynamic_sidebar( 'sidebar-2' ); ?>
            </div><!-- .widget-area -->
        </div><!-- .sidebar-inner -->
    </div><!-- #tertiary -->
<?php endif; ?>

Alles anzeigen

SirEctor

Damit Sub nur angezeigt wird bei Hover:

Code

.widget ul.menu li ul{visibility:hidden;}
.widget ul.menu li:hover ul{visibility:visible;}

achisto

Kein Problem ich änder es gerne nochmal.
Edit: Ich werd das mal ausprobieren und schauen ob es funktioniert. Danke SirEctor.

Mit freundlichen Grüßen

achisto

Ich bedanke mich nochmal. Jetzt müsste ja alles funktionieren.
Noch eine letzte Bitte. Würdet ihr euch die Seite nochmal anschauen und kontrollieren ob noch irgednwelche Fehler vorhanden sind die man so spontan erkennen kann?

Ich pass jetzt noch die letzten Änderungen an und schau was ich mit dem Header mach.

Vielen Dank
Mit freundlichen Grüßen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hauptnavigation untereinander | Child-Theme von Twenty-Thirteen

Jetzt mitmachen!