Align logo with site title

  • Hello there,

    I have a problem with website header : I would like to align logo + site title + site branding, but cannot find the good code for this.
    May you help ?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi there,

    Your site does not currently have a logo set. Can you please add the logo you want to use so I can see it? The logo height on this theme can be adjusted, so it’s difficult to figure this out without knowing how tall your logo is – code that aligns things at one logo height might not look right at another.

    And do I understand correctly that you wish the logo to appear next to the site title? To the right or the left?

    I’m unclear what you mean by “site branding”. In the site header is a div with the class .site-branding, but that div contains your site title and tagline. So the title is part of the site branding, not something separate from it. Do you mean the tagline, “La clarté des textes, la couleur des mots”? Should the tagline remain underneath the title like it currently is?

    Lastly, do you already have any additional CSS added? This theme doesn’t normally display the tagline, so if you’ve added custom CSS or otherwise forced it to display on your site it would be helpful to know what you did.

    Thread Starter Oaz

    (@oaz)

    Hello There, no I did not set the logo as it will display above site title, and although the good size for it is mentionned (240×240), it does not display good as if the photo was too small.
    And yes the slogan is “la clarté des textes, la couleur des mots”, I changed the css in the child theme as there was a “display none” that prevented it from appearing. But I dId not make any change to the code for the header wrapper either in CSS or PHP.

    I would like the logo to display before the website title, on its left side, and if possible the slogan on its right side. I tried to to replace “block” with “inline” in CSS, but to no avail.

    here is what header.php file

    <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>>
    <div id=”page” class=”site”>
    <?php esc_html_e( ‘Skip to content’, ‘shoreditch’ ); ?>

    <header id=”masthead” class=”site-header” role=”banner”>
    <div class=”site-header-wrapper”>
    <div class=”site-branding”>
    <?php shoreditch_the_custom_logo(); ?>

    <?php if ( is_front_page() && is_home() ) : ?>
    <h1 class=”site-title”>” rel=”home”><?php bloginfo( ‘name’ ); ?></h1>
    <?php else : ?>
    <p class=”site-title”>” rel=”home”><?php bloginfo( ‘name’ ); ?></p>
    <?php endif; ?>
    <p class=”site-description”><?php bloginfo( ‘description’ ); ?></p>
    </div>

    <!– .site-branding –>

    <?php if ( has_nav_menu( ‘primary’ ) ) : ?>
    <button id=”menu-toggle” class=”menu-toggle”><?php esc_html_e( ‘Menu’, ‘shoreditch’ ); ?></button>
    <div id=”site-menu” class=”site-menu”>
    <nav id=”site-navigation” class=”main-navigation” role=”navigation” aria-label=”<?php esc_html_e( ‘Primary Menu’, ‘shoreditch’ ); ?>”>
    <?php
    wp_nav_menu( array(
    ‘theme_location’ => ‘primary’,
    ‘menu_class’ => ‘primary-menu’,
    ) );
    ?>
    </nav><!– .main-navigation –>
    </div><!– .site-menu –>
    <?php endif; ?>
    <?php
    if ( function_exists( ‘shoreditch_woocommerce_header_cart’ ) ) {
    shoreditch_woocommerce_header_cart();
    }
    ?>
    </div><!– .site-header-wrapper –>
    </header><!– #masthead –>

    <div id=”content” class=”site-content”>
    <?php if ( get_header_image() ) : ?>
    <div class=”header-image”>
    ” rel=”home”>
    ” width=”<?php echo esc_attr( get_custom_header()->width ); ?>” height=”<?php echo esc_attr( get_custom_header()->height ); ?>” alt=””>

    </div><!– .header-image –>
    <?php endif; // End header image check. ?>

    I would like the logo to display before the website title, on its left side, and if possible the slogan on its right side.

    So you want it Logo Title Tagline, all next to each other? You can do that by setting all three elements to display:inline-block, but that will cause the site menu to be pushed down to the next line depending on the screen’s size:

    .custom-logo-link, .site-title, .site-description {
	display:inline-block;
	padding-right: 10px;
}

    Note that this code will also cause the tagline to be un-hidden, so you can remove the other code you added for that if you use this. You can increase the value of the padding to increase the spacing between the elements.

    Note that on mobile screens these items will still display underneath each other, as there’s not enough space to have them next to each other there.

    here is what header.php file

    I’m not sure why you’re pasting the content of the header.php file here. This isn’t a change that can be made in that file.

    Thread Starter Oaz

    (@oaz)

    Thanks you very much Kokkieh, I’ll try this today and let you know. I had tried with inline attribute, with no success. I ‘ll try again..

    If i Want just logo and site title to be aligned, and leave the tagline underneath, (so that menu stays at its place on smaller screens and tablets, do you know what I should change in your code ?

    Thread Starter Oaz

    (@oaz)

    I found how , thank you very much for your help !

    My pleasure ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Align logo with site title’ is closed to new replies.