Menü und Webseite anpassen

Nils91

Hallo,
Ich habe das Vendipro Design und möchte gerne mein Header Menü weiter nach oben setzen und die ganze Webseite über die ganze Seitenbreite anzeigen lassen.

Jemand eine Idee wie ich das ändern könnte?

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

Sailor56

Das wird mit CSS möglich sein, aber ohne Link zur Seite kaum / bis gar nicht zu machen.
Ansonsten ist Vendipro ja kostenpflichtig... da sollte auch der Support mit drin sein.

Nils91

so.. das mit der Breite habe ich mit dem css code hinbekommen

Code

.container {
         max-width: 98%;
}

auf die Webseite kommt man derzeit nicht drauf da diese im offlinemodus ist damit die Kunden nicht auf die Seite können die den link kennen.
nun hat der support geschrieben das es mit dem Menü möglich ist wenn ich änderungen in der header.php vornehme und evtl. noch css anpassungen im child theme.

mein header.php sieht wie folgt aus:

PHP

<?php
/**
 * The template for displaying header
 *
 * @author Vendidero
 * @version 1.0.0
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> <?php vp_html_tag_schema(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header id="hmain">
        <div id="hbar">
            <div class="container container-nomargin">
                <div class="grid grid-3">
                    <div class="column">
                        <p><?php echo do_shortcode( vp_get_option( 'features_1' ) );?></p>
                    </div>
                    <div class="column align-center">
                        <p><?php echo do_shortcode( vp_get_option( 'features_2' ) );?></p>
                    </div>
                    <div class="column align-right">
                        <p><?php echo do_shortcode( vp_get_option( 'features_3' ) );?></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-inner">
            <div class="container">
                <div class="widgets" id="widgets-header">
                    <div class="grid grid-<?php echo vendipro()->widgets->get_widget_count( 'vp_header' ) + 2; ?>">
                        <div id="logo" class="widget column">
                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="logo-text <?php echo ( ! vp_get_option( 'show_logo' ) ? 'logo-active' : '' ); ?>" rel="home" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                                <span class="pagetitle"><?php echo bloginfo( 'name' );?></span>
                                <span class="subtitle"><?php echo bloginfo( 'description' );?></span>
                            </a>
                            <a class="logo-img <?php echo ( vp_get_option( 'show_logo' ) ? 'logo-active' : '' ); ?>" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                                <span class="logo-helper"></span>
                                <img src="<?php echo ( is_ssl( ) ? str_replace( 'http://', 'https://', vp_get_option( 'logo' ) ) : vp_get_option( 'logo' ) ); ?>" rel="logo" alt="<?php echo vp_get_option( 'logo_alt' ); ?>" />
                            </a>
                        </div>
                        
                        <?php dynamic_sidebar( 'vp_header' ); ?>


                        <?php do_action( 'vendipro_after_widgets_header' ); ?>


                    </div>
                </div>
            </div>
        </div>
        <div class="container container-nomargin" id="nav-wrapper">
            <nav class="navbar" role="navigation">
                
                <div class="menu-left">
                    <?php wp_nav_menu( array( 'container' => '', 'theme_location' => 'header-main', 'menu_class' => 'nav slimmenu', 'menu_id' => 'menu-header' ) ); ?>
                </div>
            
            </nav>
        </div>
    </header>
    <div class="container" id="main-wrapper">
        <?php
            if ( vp_get_option( 'blog_featured_header_image' ) && is_singular( array( 'post', 'page' ) ) && has_post_thumbnail( $post->ID ) &&
                    ( $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                    $image[1] >= HEADER_IMAGE_WIDTH ) :
            ?>
            <div class="featured-image"><?php echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); ?></div>
        <?php endif; ?>

Alles anzeigen

wie bekomme ich denn da nun das Menü nach oben unter die Stelle:

PHP

<p><?php echo do_shortcode( vp_get_option( 'features_1' ) );?></p>
                    </div>
                    <div class="column align-center">
                        <p><?php echo do_shortcode( vp_get_option( 'features_2' ) );?></p>
                    </div>
                    <div class="column align-right">
                        <p><?php echo do_shortcode( vp_get_option( 'features_3' ) );?></p>

Sailor56

Zitat von kurzke2

wie bekomme ich denn da nun das Menü nach oben unter die Stelle:

... uhhh... gaaaanz vorsichtig!
Ist das die Antwort des Supports? .. die sollten es ja wissen.
Zunächst stelle sicher, dass du eine Sicherheitskopie deiner header.php hast, damit du im Zweifelsfall den Originalzustand wieder herstellen kannst..
Dann öffnest du deine header.php im Editor und suchst folgende Stelle...

PHP

<div class="container container-nomargin" id="nav-wrapper">
            <nav class="navbar" role="navigation">
                
                <div class="menu-left">
                    <?php wp_nav_menu( array( 'container' => '', 'theme_location' => 'header-main', 'menu_class' => 'nav slimmenu', 'menu_id' => 'menu-header' ) ); ?>
                </div>
            
            </nav>
        </div>

Das sollte der Code deines Menüs sein - dieser Code ist ziemlich weit unten in deiner header.php... direkt vor dem </header>.
Diesen Code schneidest du aus (cut... Code markieren - dann 'Strg' + 'x')
Dann den Cursor an die gewünschte Einfügestelle platzieren... ggf dort eine Leerzeile erzeugen und dann den unten ausgeschnittenen Code in diese Leerzeile einfügen (paste... 'Strg' + 'v')
Speichern - fertig - ausprobieren.
Ich denke aber, dass die Einfügestelle, die du oben angegeben hast nicht ganz korrekt ist.
Hinter der Zeile, die du als letztes bei ..'unter die Stelle' .. angegeben hast befindet sich noch ein </div> und ich denke, die Einfügung sollte hinter diesem </div> erfolgen.
Wenn das nicht klappt, dann ersetze die 'header.php' wieder durch den Originalcode, den du als Sicherheitskopie erstellt hast.

Nils91

Super, Danke! Funktioniert!

Gibt es denn auch die Möglichkeit das so zu machen das das Menü auch beim scrollen immer sichtbar ist?
Also das es sozusagen fixiert ist?

Sailor56

Ja... sticky ist ein CSS3 Format, dass leider (noch) nicht mit allen Browsern funktioniert.
So wäre die einfachste Lösung im zusätzlichen CSS für die id="nav-wrapper" folgendes zu notieren:

HTML

#nav-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 0em;
  }

wenn das nicht klappt, gäbe es noch die Möglichkeit das mit JavaScript zu realisieren... aber da muss ich passen.
Da müsstest du im JS Forum nachfragen... eigenen JS Codes in WP ist oft etwas tricky.

Nils91

Das funktioniert auch sehr gut, Danke.
Kann man bei WordPress (benutze WooCommerce) eigentlich auch ein Login machen im Menü? So das ein Fenster aufgeht wenn man drauf klickt?

Sailor56

Hmmm... ja, das geht bestimmt! Aber mache dafür bitte ein neues Thema im WooComm Forum auf.
Da ich das selber nicht nutze, habe ich davon auch NULL bis gar keine Ahnung.. und bevor ich dir hier was Falsches empfehle, solltest du lieber die WooComm Fachleute um Rat fragen.

Nils91

Okay mache ich. Danke auf jeden Fall erstmal.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menü und Webseite anpassen

Jetzt mitmachen!