Hauptnavigation untereinander | Child-Theme von Twenty-Thirteen

achisto

Hallo,

ich hab ein Problem. Ich bin zurzeit dabei ein Child-Theme von Twenty-Thirteen für eine Grunschule zu erstellen. Folgendes Problem ergibt sich: Wie kann ich den die Hauptnavigation wieder untereinander anzeigen lassen? Ich bin leider noch relativ neu in Wordpress.
Versuche die ich bis jetzt unternommen habe, waren zum einen:
-Die .navbar eine geringeren width-wert zu verpassen, umso die einzelnen Punkte untereinander anzeigen zu lassen.
und zum anderen:
-Habe ich die .navbar mit clear:float probiert wieder untereinander anzuordnen.

Die untere Lösung hat überhaupt nicht funktioniert. Die obere nur bedingt. Ich konnte danach nichtmehr alle Navigationspunkte anklicken. Kennt ihr noch eine andere Methode? Welchen Selektor muss den angesprochen werden um die Navigation zu verändern?

Ich hab dann direkt noch eine andere Frage: Die einzelnen Hauptpunkte der Navigation sollen durch Buttons (Stifte mit Namen) ersetzt werden. Ist das den in Wordpress möglich. Hab bisher nur ein Tutorial im Web gefunden was bei mir leider nicht funktioniert hatte.

Wordpress Version: 3.6.1.
Blog Adresse: grundschule-ho-as.de/wordpress/

Mit freundlichen Grüßen

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

pixselig

Hallo
Ohne mir die Seite jetzt abgesehen zu haben: ein "clear:float;" gibt es nicht.
LG, pixselig

achisto

Hallo,

ich hab es nichtmehr durchgelesen. Dort hätte eigentlich clear:left stehen sollen und nicht clear:float.

Mit freundlichen Grüßen

pixselig

Hallo Achisto

Zitat von achisto

Wie kann ich den die Hauptnavigation wieder untereinander anzeigen lassen?

Ich verstehe nicht ganz was du meinst. Was bedeutet "wieder"? Standardmässig wird in twentythirteen in der Desktopansicht (bei genügent Viewport-Breite) das Menü nebeneinander angezeigt. In der mobilen Variante dann als DropDown untereinander. Willst du das Menü vielleicht in der Sidebar haben? Wenn ja, dann verwende dazu ein Menü-Widget.

Zitat von achisto

Ich hab dann direkt noch eine andere Frage: Die einzelnen Hauptpunkte der Navigation sollen durch Buttons (Stifte mit Namen) ersetzt werden. Ist das den in Wordpress möglich. Hab bisher nur ein Tutorial im Web gefunden was bei mir leider nicht funktioniert hatte.

Hier im Forum hat vor einiger Zeit mal ein User ein gutes Tutorial dazu geschrieben -> http://forum.wpde.org/design/102021-…html#post446910
Ansonsten, enn du vor der Schrift einfach ein Stift-Symbol haben willst kannst du auch mit einer icon-Schrift arbeiten -> das ist viel einfacher und behält auch die responsive eigenschaft des Themes bei.
Apropos "responsiv": hast du dir deine Seite mal auf einem mobilen Gerät angesehen?

LG, pixselig

achisto

Hallo pixselig,

Zitat von pixselig

Apropos "responsiv": hast du dir deine Seite mal auf einem mobilen Gerät angesehen?

Nein, ich bin noch ein kompletter Anfänger was Wordpress betrifft. Ich wäre bisher mal froh wenn die Seite so aussehen würde wie die Fireworks Vorlage von mir. In der Agentur in der ich arbeite kann mir keiner helfen, da kein fester Programmierer in der Agentur beschäftigt ist. Ich versuch mich gerade mehr oder weniger selbst da durchzubeißen. Zurück zum eigentlichen Thema.

"Wieder" war etwas falsch gewählt. Ziel ist es die Navigation nach Links in eine Sidebar zu platzieren. Dort dann untereinander. Die Hauptmenü Punkte, also in meinem Falle Home, Aktuelles, etc. sollen durch Stiftgrafiken ersetzt werden.

Ich hab das eben mal kurz getestet mit dem Menü-Widget. Nun wird das Menü in der rechten Spalte angezeigt. Es wird auch jeder einzelne Punkt angezeigt. Nicht nur die Überpunkte.

Vielen Dank trozdem für deine Hilfe

Mit freundlichen Grüßen

pixselig

Hast du das schon probiert -> https://wordpress.org/support/topic/…left-of-content

Ich denke, dass ist deine erste Seite mit WP, wie weit besitzt du denn Kenntnisse in html und css?

Ich verstehe nicht wie eine Agentur einen Auftrag für etwas übernehmen kann für das ihr das nötige KnowHow fehlt. (Ist nicht böse gemeint!)

Wenn alle Stricke reissen dann köönt ihr euch ja auch an das Jobforum hier wenden.

achisto

Zitat

Ich verstehe nicht wie eine Agentur einen Auftrag für etwas übernehmen kann für das ihr das nötige KnowHow fehlt. (Ist nicht böse gemeint!)

Kein Auftrag. Ist ein Sponsoring für die Schule. Ich bin auch nur Praktikant für die FH-Reife.

Das Tutorial mit den Stiften funktioniert. Vielen Dank.

HTML und CSS Kenntnisse sind vorhanden.

Zitat

Hast du das schon probiert -> https://wordpress.org/support/topic/...eft-of-content

Das werd ich mal versuchen. Dann bedanke ich mich. Sollte ich noch eine Frage haben. Editier diesen oder schreibe einen neuen Beitrag.

pixselig

Die Grafik mit dem Stift inkl. Hover-Effekt sieht ja mal echt cool aus!

achisto

Zitat von pixselig

Die Grafik mit dem Stift inkl. Hover-Effekt sieht ja mal echt cool aus!

Vielen Dank. Hat auch etwas gedauert die in Illustrator zu zeichnen.

achisto

Ich konnte den oberen Post von mir nicht bearbeiten, daher dieser Doppelpost.

Durch das Tutorial konnte ich die einzelnen Hauptmenu Punkte mit den entsprechenden Grafiken ersetzten. Jetzt ist aber folgendes Problem. Wenn ich ein Untermenü habe, dann wird dort auch jeder Menüpunkt mit der Grafik des Hauptmenüpunktes ersetzt.

Der Code sieht folgendermaßen dazu aus:

HTML

.menu-main-menu-container li.menu-item-51 a:link {
        display:block;
        background:url(images/bleistift_aktuelles.png)no-repeat 0 0;
        width:100%;
        height:100%;
        text-indent:-9999px;
}
    
.menu-main-menu-container li.menu-item-51 a:hover,
.menu-main-menu-container li.menu-item-51 a.current_page_item  {
        display:block;
        background:url(images/hover_aktuelles.png)no-repeat 0 0!important;
        width:100%;
        height:100%;
        text-indent:-9999px;
}

Alles anzeigen

Wie kann man das Problem den beheben?

Vielen Dank im Voraus
Mit freundlichen Grüßen
Achisto

pixselig

mittels

CSS

.sub-menu li a {background: none!important;}

achisto

Zitat von pixselig
mittels
CSS
.sub-menu li a {background: none!important;}

Edit:

Hat doch funktioniert. Der Webspaceprovider war leider nur nicht erreichbar und ich hab es eben erst bemerkt.

Die Schrift im Sub-Menü hab ich jetzt auf Weiß gesetzt. Aber angezeigt wird sie nicht.

SirEctor

Ich sehe den Code in Deiner CSS nicht. Wo hast Du ihn genau eingetragen? Und mach mal vor dem Ausrufezeichen ein Leerzeichen.

pixselig

klar funktioniert das - leere mal den cache deines browser!
übrigens kannst du über obugen selektor das submenü ganz individuell gestalten ;)

SirEctor

setzt mal in den o.g. Code noch text-indent: 0 !important;

achisto

Danke an euch beiden. Die Schrift wird wieder angezeigt.

achisto

Jetzt nocheinmal kurz zur Frage vom Anfang zurück. Ist es den möglich die Hauptnavigation untereinander zu setzten?
Oder funktioniert nur die Lösung mit einem Menü-Widget? Geht es auch anders? Würd eigentlich ungern den ganzen Code umschreiben müssen um die Bilder nun im Menü-Widget angzeigt zu bekommen.

Vielen Dank im Voraus
Mit freundlichen Grüßen

pixselig

klar geht das:

CSS

.navbar {
    position: relative;
    width: 100px;
    z-index: 9999 !important;}

dabei bleibt allerdings die navbar im header und überlagert den content. weiters must du mittels:

CSS

.sub-menu {margin-left: 100px !important;
top: 18px !important;}

das submenü neben das mainmenü setzen da es dieses sonst überlagert.

ABER: das alles bringt nichts wenn die position nicht stimmt!!!
Daher: Link mit dem wechsel des Sidebar ausprobieren (von rechts nach links) -> hoffentlich funktioniert er!
Und dann folgenden Code aus der header.php ausschneiden:

PHP

<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 -->

und in die sidebar.php einfügen:

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">
[COLOR=#ff0000]         <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 -->[/COLOR]
            <div class="widget-area">
                <?php dynamic_sidebar( 'sidebar-2' ); ?>
            </div><!-- .widget-area -->
        </div><!-- .sidebar-inner -->
    </div><!-- #tertiary -->
<?php endif; ?>

Alles anzeigen

das ganze ist jtzt aber ein wie "das Pferd von hinten aufzäumen" aber sollte gehen -> vorrausgesetzt du bekommst die Sidebar nach links.

ACHTUNG: was ich hier jetzt nicht berücksichtigt habe ist, die "responsive" Eigenschaft des Themes!!!

achisto

Vielen Dank pixselig. Ich werd mich morgen dann melden ob es funktioniert hat. Bin zurzeit noch in einer grafischen Arbeit beschäftigt in Photoshop beschäftigt.

Mit freundlichen Grüßen

achisto

Guten Morgen,

ich hab nun beide Versionen getestet. Die zweite Variante mit der Sidebar hab ich nicht ganz hinbekommen also bin ich zurück zur ersten. Diese hat aber ganz gut funktioniert.

Als letzte Frage nun noch: Ich hatte versucht den site-header mit position: fixed zu fixieren an seiner Stelle. Dies hat auch ganz gut geklappt. Die Änderung hatte ich nun wieder aufgehoben da der ganze Contentbereich unter dem Site-Header hindurch "geslidet" ist und aus dem Bild verschwunden. Wie ist es den möglich den Contentbereich so wegsliden zu lassen, dass er eben nicht unter dem Site-Header verschwindet sondern davor. Eben so, dass die Schrift schon vorher dem Site-Header Bilder verschwindet und nicht darunter noch zu sehen ist.

Vielen Dank im Voraus
Mit freundlichen Grüßen

//EDIT: Text ausgebessert.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hauptnavigation untereinander | Child-Theme von Twenty-Thirteen

Jetzt mitmachen!