• I have added some HTML for image logo in the General Settings, Header Description. However this appears half way across the page above the top menu bar.

    How can I change it to appear to the left?

Viewing 14 replies - 1 through 14 (of 14 total)
  • Hi marks262,

    Could you give us a link to your site so we can see what you’re seeing and what you want to change?

    Thanks!

    Thread Starter marks262

    (@marks262)

    The link is https://www.tadleyrunners.co.uk/
    The logo at the top I want aligned to the left just above where it shows home page in menu bar. I have tried various images sizes and use the left align tag for the image html.

    Hi marks262,

    First and foremost, make sure you are using a Child Theme. Once you are using a Child Theme, copy the header.php file of the parent theme over into the Child Theme.

    Edit your header.php file as follows:

    If you just want to insert that image (without the image being a clickable link):

    Look for the following lines:

    <hgroup class="fleft">
    	<h1 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo('description'); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
    		<h2 id="site-description"><?php bloginfo('description'); ?></h2>
    </hgroup>

    Replace those lines with:

    <hgroup class="fleft">
    	<img src="https://tadleyrunners.co.uk/wp-content/uploads/2012/01/TopLogo.jpg">
    </hgroup>

    If you want to make the link clickable, instead replace with:

    <hgroup class="fleft">
    	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo('description'); ?>" rel="home"><img src="https://tadleyrunners.co.uk/wp-content/uploads/2012/01/TopLogo.jpg"></a>
    </hgroup>

    Lastly, for either way you choose, remove the background url from the branding element in your style sheet so that the background will blend in with your logo. Add this to your Child Theme’s style sheet:

    #branding {
        background: none;
    }

    Hope this helps!

    Thread Starter marks262

    (@marks262)

    Thanks, I will change it to use a child theme and then make the suggested changes.

    Thread Starter marks262

    (@marks262)

    Thanks for that I have got that bit working now.

    How can I reduce the gap between the logo and the menu bar?

    Hello marks262,

    Looking at your site with the Firebug extension in Firefox, I noticed this code in your style sheet that should control the position of your navigation bar (menu bar):

    nav {
    display: block;
    font-size: 14px;
    margin: 10px -10px 0;
    padding: 0 30px;
    position: relative;
    }

    You can modify that margin as needed to decrease the gap between your logo and the navigation bar.

    Hope this helps!

    sam27

    (@sam27)

    I am having the same issue. As suggested i created a child theme by having a new folder by the name ‘wp-content-child’ and i have two files in this folder.
    1. header.php which i copied from the ‘wp-content/themes/blogolife’ folder and edited as mentioned out here.
    2. style.css file which i used similar to the one used by marks262 on his blog.

    Is there anything else i need to do to make sure the child theme get inherited.

    I am completely new to PHP and WP. Any help is greatly appreciated.

    sam27

    (@sam27)

    BTW i forgot to specify my domain in my previous post
    https://blog.educatemax.com

    sam27

    (@sam27)

    sorry i messed up the url it is blogs.educatemax.com

    Hello sam27,

    This really should be posted as a new question. Please note, when you are using a Child Theme, any files you wish to customize should be copied over into the new Child Theme folder and then edited there (not edited in the parent theme folder). You will also need to activate the Child Theme in order to see and utilize the changes to your Child Theme. I would also recommend using a clear folder name for your Child Theme (wp-content-child might be confuses with the wp-content folder it resides in).

    Hope this helps!

    Dear All,

    I’m at a Loss, after successfully making the modification I needed.

    Blogolife Theme (Nov.2012 version):
    Homepage Logo positioning works Fine: https://www.lifebalance.pt
    Click on a link from the Menu bar. Result > Logo in the Header is missing

    Could somebody advise me how-to-resolve the case of the Missing Header Logo in sub-pages ?

    Any support you may give is verrrrry much appreciated ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    For support with your own issues, you should create your own thread.

    Hi hanshjc,

    I’m going to break the rules a little here and help you out. Looks like you may have hard coded the link to the image into the header file. If you did, instead of using:

    wp-content/uploads/2012/12/design_LifeBalanceR222.jpg

    try using the full url or this instead:

    <?php echo home_url(); ?>/wp-content/uploads/2012/12/design_LifeBalanceR222.jpg

    Hope this helps. If not, or if you have further questions, please post a new question in the forum.

    Christi N.

    Christi > thanks your your great help, I used the full url, and it works beautifully now ! Thanks so much.

    Andrew hello, I will create a new thread in the future, have learnt this from you now. (I was under the assumption to bundle similar questions together, I’ll make sure not doing so any more.)

    Wish you both a wonderful day !

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Problem with Header Logo in BlogoLife WPlook’ is closed to new replies.