Hallo,
ich bin der Tom aus München.
Ich bin dabei mir einen kleinen Blog zu bauen, und nun habe ich ein Problem mit dem header. Das Title wrapping überlagert mein header photo, außerdem finde ich es viel zu fett. Ich würde gerne auf den Balken verzichten, habe auch schon viel Zeit in die Suche gesteckt, aber ich komme nicht drauf. Ich arbeite mit Wordpress 4.9.8 mit lokalem Server und habe das Theme "radiant".
Ich sage schon mal vielen Dank für Eure Hilfe.
Gruß,
Tom
Wenn du uns einen Link zur Seite posten würdest, könnten wir dir vielleicht helfen, mit einem Screenshot alleine können wir nichts anfangen.
Mit einer lokalen WordPress Installation ist das mit dem Link zur Seite nicht so einfach... aber es gibt zu dem WP-Theme eine Demo im Netz:
https://demo.themegrill.com/radiate/
craftsmen22
Leider kann ich mit deiner Problembeschreibung nicht wirklich was anfangen... du willst den 'Balken(?)', also deine Navigation weg haben oder weniger 'fett' machen? Wie soll das dann aussehen?
Zu der Überlagerung von Bild und Menüleiste könntest du versuchen dem <div...> mit dem Bild ein margin-top zu geben so dass das Bild um die Höhe des Menübalkens weiter nach unten rutscht!
zB.
#parallax-bg {
margin-top: 60px;
}
Die 60px musst du natürlich noch an die tatsächliche Höhe deines Balkens anpassen.
Und das Ganze bitte in das 'zusätzliche CSS' im Customizer eintragen - wenn du nicht weißt, wie das geht dann hier mal ein kleines Video(Tutorial)
https://www.youtube.com/watch?v=KJpZT5IkOpc
Mit einer lokalen WordPress Installation ist das mit dem Link zur Seite nicht so einfach
Ups, das habe ich wohl überlesen. 
Vielen Dank für den Link zum Theme. Ich habe mal ein Foto gemacht, vielleicht wird es nun klarer. Der Skyscraper ist zu einem kleinen Teil vom transparenten Balken verdeckt. Was müsste ich nun machen, damit das ganze Bild sichtbar ist, und wie bekomme ich den Balken schmäler, ich finde das schaut nicht so toll aus, wenn der Balken so fett ist.
Ich hoffe man kann es erkennen, die Spitze ist im transparenten Streifen. Mein Ziel den Streifen nach oben schieben, oder das Bild absenken.
hast du es den schon mit margin-top:30px; oder margin-bottom:30px; versucht ? Vieleicht kommt für dich auch padding-top; in frage, jenachdem wie du dir das genau vorstellen tust.
Kannst du den css Teil nicht mal posten ?
craftsmen22 - hast du meinen Beitrag #3 gelesen und den Vorschlag zur Behebung der Überlappung mal ausprobiert?
Was ist dabei rausgekommen?
Sailor: vielen Dank für die Nachfrage, ich habe versucht mit dem von dir verlinkten youtube video weiter zu kommen, aber wegen dem Trennen von Balken und Bild hatte ich dann meine Probleme.
basti1012: eine gute Idee, mein css hier zu posten, hier ist das gute stück:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package ThemeGrill
* @subpackage Radiate
* @since Radiate 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<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">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="parallax-bg">
<?php if ( get_header_image() && function_exists( 'the_custom_header_markup' ) && is_front_page() && has_header_video() ) :
the_custom_header_markup();
endif; ?>
</div>
<div id="page" class="hfeed site">
<?php do_action( 'before' ); ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap clearfix">
<div class="site-branding">
<?php if ( is_front_page() 
is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<h3 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h3>
<?php endif; ?>
<?php
$description = get_bloginfo( 'description', 'display' );
if ( $description is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; ?></p>
<?php endif;?>
</div>
<?php if ( get_theme_mod( 'radiate_header_search_hide', 0 ) == 0 ) { ?>
<div class="header-search-icon"></div>
<?php get_search_form();
} ?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h4 class="menu-toggle"></h4>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'radiate' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu-primary-container' ) ); ?>
</nav><!-- #site-navigation -->
</div><!-- .inner-wrap header-wrap -->
</header><!-- #masthead -->
<div id="content" class="site-content">
<div class="inner-wrap">
eine gute Idee, mein css hier zu posten, hier ist das gute stück:
Das ist nicht die CSS-Datei von deinem Theme, sondern die header.php! Wenn man den Unterschied schon nicht kennt ...
Der Hinweis von Sailor hilft dir weiter!
Das ist der entsprechende Inline-CSS-Code
#parallax-bg {
background-image: url('https://demo.themegrill.com/radiate/wp-content/themes/radiate/images/header/header-image-one.jpg');
background-repeat: repeat-x;
background-position: center top;
background-attachment: scroll;
}Im Backend von Wordpress kannst du unter Design/Customizer bei "Zusätzliches CSS" dann eintragen:
#parallax-bg {
background-position: center 60px !important;
}
Mit den 60px musst du etwas rumspielen, bis es passt
Das wird nichts nützen.... ich denke nicht, dass sich jemand die Mühe machen wird für dich ein > 1400 Wörter style.css durchzuackern!
Ist ja aber auch nicht nötig, befasse dich etwas mit den Grundlagen (PHP, HTML, CSS) und beschäftige dich etwas mit den DevTools (Entwicklerwerkzeuge, die jeder Browser von Haus aus eingebaut hat), dann wirst du sehr schnell solche Probleme selber lösen können!
Zumal ich dir die Antwort in Beitrag #3 schon gegeben habe! 2 Zeilen CSS Code in das 'zusätzliche CSS' im Customizer (vom Dashboard -> Design -> Customizer -> zusätzliches CSS) ... und dein Problem wäre behoben.
Und in dem ebenfalls in #3 angehängtem Tutorial-Video wird dir auch visuell gezeigt, wie man solche Änderungen im 'zusätzlichen CSS' durchführen kann.
Jetzt versuche es erst mal auf diesem Weg und wenn es da Probleme gibt, dann liefere mehr Informationen als...
Zitat...ich habe versucht mit dem von dir verlinkten youtube video weiter zu kommen, aber wegen dem Trennen von Balken und Bild hatte ich dann meine Probleme.
sonst ist es mit helfen sehr schwierig... hellsehen können wir alle nicht!
- - - Aktualisiert - - -
@Bandit ... Danke... wenigstens einer versteht mich :-D!