• Hi,
    Is there a way of adding more than one image to the header area.
    We would ideally like to add the logo to the left hand side of the header area with a link to the Home page and a custom button on the right hand side of the header with a link elsewhere.

    Is this possible?

Viewing 15 replies - 1 through 15 (of 20 total)
  • Yes it is, it would require editing the header.php file so you would need to create a
    child-theme first.

    I concur with batharoy. You can first safely create a child theme then copy the header.php from the parent theme folder and put it in your child theme folder and edit it.

    Thread Starter canu

    (@canu)

    Thanks for the quick feedback.

    I’ve created a child theme and have an amended header.php file uploaded, what would be my next step?

    Apologies if the question is a little facile but I don’t know PHP so any assistance would be appreciated.

    You don’t really need to know PHP as you can just use HTML in which you insert img tags.

    Read this article on img tags.

    Image Tags

    Look for this section in the header.php

    </hgroup>
    ENTER YOUR CODE HERE
    <nav id=”site-navigation”

    Be sure to give it a unique id.

    For a link with image:

    <a href="LINK TO EXTERNAL SITE"><img src="LINK TO IMAGE" /></a>

    For a CSS style button:

    <a href="LINK TO EXTERNAL SITE" target="_blank">TEXT FOR BUTTON</a>

    Then use css to position and style as needed.

    Thread Starter canu

    (@canu)

    Thanks Guys, much appreciated.

    I will give this a try soon and will you know how I make out.

    Sorry to hijack this thread but I have just posted something very similar myself. I had sort of come to the same solution suggested by Batharoy but when I try this it ends up pushing the existing site image upwards. I am somewhat new to all this so is the suggested unique id in this code

    <img src=”LINK TO IMAGE” />

    the bit in quotes or is it the “a” before href; like a, b, c, etc

    The unique ID wasn’t put in the code above, sorry. It would be structured like this:
    <a id="header-logo" href="LINK TO EXTERNAL SITE"><img src="LINK TO IMAGE" /></a>
    The id can be anything you want but it’s best to use something that describes the element.
    In this case it’s usually someone wanting a logo along with the site title text title in the header.

    You can then use the id in your css:

    #header-logo{
    align: left;
    }

    etc…

    So in my instance I am trying to get the Floating Social Media Icons from the Acurax Pluging to align to the right hand side of my header. I initially used ths following code but I pushed the existing site image upwards. Is this because I never gave it a unique id.

    <?php DISPLAY_ACURAX_ICONS(22,48,0,’bounce’,0.9); ?>

    <a href="Social Media Icons"><?php DISPLAY_ACURAX_ICONS(22,48,0,'bounce',0.9); ?></a>

    The php snippet takes care of the href= , you would want the id in that spot. Also if using more than 1 word in the id use hyphens or it will add as a separate id for each word.

    <a id="social-media-icons"><?php DISPLAY_ACURAX_ICONS(22,48,0,'bounce',0.9); ?></a>

    Firstly, I apologise to canu for hijacking this thread. Thanks to Batharoy for the suggestions. However, there is still a problem with alignment. What is happening is that the h1 site-title has full page width allocated to it and even though the image aligned to the left is only 238px wide. When I try and place the social media icons in the same area it also allocates an additional full page width to area it is placed. Hard to explain really, but the bottom line is that horizontally I can place the social media icons exactly where I want them but vertically I cannot get them on the same line as the site-image.See here https://tinyurl.com/orzpzaz

    OK, after looking at the source on your site it appears the php snippet already assigns an id to social widget. There is no reason for you to add one.

    It also looks like you added the <a id="social-media-icons" info twice,
    the first has only <style> info and the second is empty. Your only allowed one id per page.
    So let’s start by removing both of those completely.
    After that we will style it the way you want.

    Ok. You will have to bear with me on this as I am a total newcomer. A full 2 weeks and 1 day. I have removed all reference to this from the Header.php file and the positioning from the style.css. Hopefully, thats everything gone.

    Ok now put the php snippet back into the header.php, i believe it waas in the <hgroup>tag.

    <?php DISPLAY_ACURAX_ICONS(22,48,0,'bounce',0.9); ?>

    But only the snippet, nothing else.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Adding More Than One Logo/Header Image’ is closed to new replies.