Zusätzlichen Div Container im Header Bereich einfügen?

angus-old

Hallo zusammen,

ich würde gerne auf unserer Internetseite http://www.noisecon.de (mit Twenty Sixteen) unterhalb des Hauptmenüs noch eine
kleine Navigation mit Links (Social Media etc.) selbständig einfügen.
Leider habe ich nicht so viel Erfahrung, wo genau ich dafür ansetzen muss (evt. in der header.php?).
Was ich gerne umsetzen würde:

Unterhalb des Main Menüs eine zusätzliche Leiste, in der ich händische Verlinkungen vornehmen kann (für Soundcloud, Facebook, Bandseiten etc...)
Diesen Bereich würde ich gerne auch per CSS anpassen können
Auch individuelle Logos für die Verlinkung würde ich gerne einfügen
Wie passe ich diese zusätzliche Leiste an, um gerade das Responsive Design nicht zu zerstören?

Könnt Ihr mir ein paar Tips hierzu geben, damit ich mich hier ein bisschen einfuchsen kann?

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

angus-old

Hallo,

durch ausprobieren habe ich jetzt einige Ansätze gefunden.
In der header.php habe ich eine zusätzliche div Container (<div class="eigenes-menu"></div>) in den header eingefügt. Per CSS habe ich dann schon einmal Werte für .eigenes-menu vergeben.
Also bin ich bereits an der richtigen Stelle;)
Jetzt stellen sich mir folgende Fragen:

Wie kann ich jetzt aber die Div Box an den rechten Rand über dem Menü positionieren (mittels css und position Befehlen hab ich es nicht hinbekommen)?
auch der margin Befehl scheint keine Auswirkungen zu haben, sodass ich einen ca 10px Abstand zwischen meiner neuen Box und dem Menü erhalte. Zwar zeigt mir Bugzilla den Margin an, jedoch setzt keine Verschiebung ein
Wie kann ich in der Box einzelne Unterteilungen für meine verschiedenen Logos vornehmen, die ich dort positionieren möchte (vermutlich auch in der header.php und mit weiteren Divboxen?)? Ich einfach mal eine erste Verschachtelung vorgenommen

Für euere Hilfe wäre ich sehr dankbar (bin noch Anfänger in diesen Bereichen...

Hier mal die Codes:

PHP

<?php/** * The template for displaying the header * * Displays all of the head element and everything up until the "site-content" div. * * @package WordPress * @subpackage Twenty_Sixteen * @since Twenty Sixteen 1.0 */
?><!DOCTYPE html><html <?php language_attributes(); ?> class="no-js"><head>	<meta charset="<?php bloginfo( 'charset' ); ?>">	<meta name="viewport" content="width=device-width, initial-scale=1">	<link rel="profile" href="http://gmpg.org/xfn/11">	<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">	<?php endif; ?>	<?php wp_head(); ?></head>
<body <?php body_class(); ?>><div id="page" class="site">	<div class="site-inner">		<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentysixteen' ); ?></a>
		<header id="masthead" class="site-header" role="banner"><!-- Eigene Anpassungen Anfang --><div class="eigenes-menu"><div class="eigenes-menu-content"> </div></div><!-- Eigene Anpassungen Ende -->			<div class="site-header-main">				<div class="site-branding">					<?php twentysixteen_the_custom_logo(); ?>
					<?php if ( is_front_page() && is_home() ) : ?>						<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>					<?php else : ?>						<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>					<?php endif;
					$description = get_bloginfo( 'description', 'display' );					if ( $description || is_customize_preview() ) : ?>						<p class="site-description"><?php echo $description; ?></p>					<?php endif; ?>				</div><!-- .site-branding -->
				<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>					<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>
					<div id="site-header-menu" class="site-header-menu">						<?php if ( has_nav_menu( 'primary' ) ) : ?>							<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">								<?php									wp_nav_menu( array(										'theme_location' => 'primary',										'menu_class'     => 'primary-menu',									 ) );								?>							</nav><!-- .main-navigation -->						<?php endif; ?>
						<?php if ( has_nav_menu( 'social' ) ) : ?>							<nav id="social-navigation" class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'twentysixteen' ); ?>">								<?php									wp_nav_menu( array(										'theme_location' => 'social',										'menu_class'     => 'social-links-menu',										'depth'          => 1,										'link_before'    => '<span class="screen-reader-text">',										'link_after'     => '</span>',									) );								?>							</nav><!-- .social-navigation -->						<?php endif; ?>					</div><!-- .site-header-menu -->				<?php endif; ?>






			</div><!-- .site-header-main -->
			<?php if ( get_header_image() ) : ?>				<?php					/**					 * Filter the default twentysixteen custom header sizes attribute.					 *					 * @since Twenty Sixteen 1.0					 *					 * @param string $custom_header_sizes sizes attribute					 * for Custom Header. Default '(max-width: 709px) 85vw,					 * (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px'.					 */					$custom_header_sizes = apply_filters( 'twentysixteen_custom_header_sizes', '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px' );				?>				<div class="header-image">					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">						<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">					</a>				</div><!-- .header-image -->			<?php endif; // End header image check. ?>		</header><!-- .site-header -->
		<div id="content" class="site-content">

Alles anzeigen

Code

.eigenes-menu {position: absolute;
border: 1px solid #800000;
width: 100px;
height: 30px;
margin: 0px 0px 10px 0px;
}
.eigenes-menu-content
{
width: 20px;
height: 20px;
border: 1px solid #800000;
}

Alles anzeigen

SEpp55

Das sollte dir weiterhelfen! LINK

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Zusätzlichen Div Container im Header Bereich einfügen?

Jetzt mitmachen!