Header Logo displays below the header

  • dmscar

    (@dmscar)


    4 years, 10 months ago

    So I’m pretty new to wordpress and have been working on the very basics of connecting everything so I can create theme from scratch, however once I enabled the Site logo and got “site identity” showing up I can upload a logo there and set it to the sizes I want. However whenever I load my page you will see the top section where I have a blank header with a few links and the right below is the main body section. The problem is whenever the logo gets displayed it’s only in the body section and no matter what I try with CSS I cannot get it to move to the header section or do anything. I have spent the past several hours today and haven’t gotten anywhere with this. Below is my code, just bare with me it’s my first WordPress theme practice so I definitely will be cleaning things up, it’s just messy due to trying a million things.

    css-
    body {
    background:aquamarine;
    }

    header {
    display:block;
    background:aliceblue;
    width:100%;
    height:100px;
    }

    .navigation {
    list-style-type: none;
    display: flex;
    }

    Header-
    <Doctype html>
    <html>

    <head>

    <?php wp_head();?>

    </head>

    <body <?php body_class();?>>

    <header class=sticky-top>

    <?php

    function theme_prefix_the_custom_logo() {

    if ( function_exists( ‘the_custom_logo’ ) ) {
    the_custom_logo();
    }

    }
    theme_prefix_the_custom_logo();

    ?>

    <div class=”container”>

    <?php wp_nav_menu (

    array(

    ‘theme_location’ => ‘top-menu’,
    ‘menu_class’ => ‘navigation’,

    )

    );?>

    </div>

    </header>

    Body/Front page-
    <?php get_header();?>

    <div class=”container pt-5 pb-5″>

    <h1><?php the_title();?></h1>

    <?php if (have_posts()) : while(have_posts()) : the_post();?>

    <?php the_content();?>

    <?php endwhile; endif;?>

    </div>

    <?php get_footer();?>

    Functions-
    <?php

    function load_stylesheets()
    {

    wp_register_style(‘bootstrap’, get_template_directory_uri() . ‘/css/bootstrap.min.css’,
    array(), false, ‘all’);
    wp_enqueue_style(‘bootstrap’);

    wp_register_style(‘style’, get_template_directory_uri() . ‘/style.css’,
    array(), false, ‘all’);
    wp_enqueue_style(‘style’);

    }
    add_action(‘wp_enqueue_scripts’, ‘load_stylesheets’);

    function include_jquery()
    {

    wp_deregister_script(‘jquery’);

    wp_enqueue_script(‘jquery’, get_template_directory_uri() . ‘/js/jquery-3.4.1.min.js’, ”, 1, true);

    add_action(‘wp_enqueue_scripts’, ‘jquery’);

    }
    add_action(‘wp_enqueue_scripts’, ‘include_jquery’);

    function loadjs()
    {

    wp_register_script(‘customjs’, get_template_directory_uri() . ‘/js/scripts.js’, ”, 1, true);
    wp_enqueue_script(‘customjs’);

    }
    add_action(‘wp_enqueue_scripts’, ‘loadjs’);

    add_theme_support(‘menus’);

    register_nav_menus(

    array(

    ‘top-menu’ => __(‘Top Menu’, ‘theme’),
    ‘footer-menu’ => __(‘Footer Menu’, ‘theme’),

    )

    );

    add_theme_support( ‘custom-header’ );

    function themename_custom_header_setup() {
    $defaults = array(
    // Default Header Image to display
    ‘default-image’ => get_template_directory_uri() . ‘/images/headers/default.jpg’,
    // Display the header text along with the image
    ‘header-text’ => false,
    // Header text color default
    ‘default-text-color’ => ‘000’,
    // Header image width (in pixels)
    ‘width’ => 1000,
    // Header image height (in pixels)
    ‘height’ => 198,
    // Header image random rotation default
    ‘random-default’ => false,
    // Enable upload of image file in admin
    ‘uploads’ => false,
    // function to be called in theme head section
    ‘wp-head-callback’ => ‘wphead_cb’,
    // function to be called in preview page head section
    ‘admin-head-callback’ => ‘adminhead_cb’,
    // function to produce preview markup in the admin screen
    ‘admin-preview-callback’ => ‘adminpreview_cb’,
    );
    }
    add_action( ‘after_setup_theme’, ‘themename_custom_header_setup’ );

    function themename_custom_logo_setup() {
    $defaults = array(
    ‘height’ => 70,
    ‘width’ => 70,
    ‘flex-height’ => true,
    ‘flex-width’ => true,
    ‘header-text’ => array( ‘site-title’, ‘site-description’ ),

    );
    add_theme_support( ‘custom-logo’, $defaults );
    }
    add_action( ‘after_setup_theme’, ‘themename_custom_logo_setup’ );

Viewing 3 replies - 1 through 3 (of 3 total)
  • a2hostinglk

    (@a2hostinglk)

    4 years, 10 months ago

    @dmscar can your share the URL of your site?

    If you share the site, we can test and provide solution / fix.

    Thread Starter dmscar

    (@dmscar)

    4 years, 10 months ago

    The site I’m building is using Desktop server so I don’t currently has it online. I haven’t gotten to the point where I feel the need for a server since I’m just building out the site visually. Hopefully since I provided the code that could be some sort of help because I’m super stuck and kinda struggling with it. Ironically I was using themify just to create something and couldn’t get text over a inline image so I changed to pure code..

    So please if anyone can help figure this out I would be indebted to you!

    themifyme

    (@themifyme)

    4 years, 9 months ago

    @dmscar – It is difficult to debug this issue without seeing the live site. We need to inspect element on the live site. Any chance you can publish your site on a http server, so we can check it?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Logo displays below the header’ is closed to new replies.