Displaying image to left of text in header

This topic has 10 replies, 3 voices, and was last updated 9 years ago by Sakin.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
April 9, 2013 at 3:44 am #6634

zigster
Member

I am trying to display an image and text in my header. The default seems to be that the image appears above the text, but I would like it to appear to the left of the text.

I’m using a child theme, and I tried hooking in a custom “catchbox_headerdetails_child” function, which is a modified copy of catchbox_headerdetails. So far I’ve succeeded in getting the image to the RIGHT of the text! lol – not what I expected.

At this point I think I need help! Here is my custom function. Any help vastly appreciated!!!

function catchbox_headerdetails_child() { ?>
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<span id=”site-logo”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
<img src=”<?php header_image(); ?>” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” />
</a></span>
<?php endif; // end check for removed header image ?>
<div class=”logo-wrap clearfix”>
<hgroup id=”site-details”>
<h1 id=”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>
<h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>
</div><!– .logo-wrap –>
<?php }

April 9, 2013 at 12:41 pm #6665

Sakin
Keymaster

@zigster: You don’t need to change any code. Just add the following CSS in “Custom CSS” box in Theme Options panel.
#branding hgroup { display: inline-block; } #site-logo { float: left; } #site-details { float: left; padding-left: 15px;} #site-title, #site-description { margin: 0 }

April 10, 2013 at 7:11 am #6705

zigster
Member

@Sakin – that worked perfectly! And way easier than what I was trying to do. 🙂

Thanks!!!

November 1, 2015 at 11:27 pm #78970

Edward
Participant

I’m new to Catch Themes and have been working with Catchbox Pro.
I would like insert a header image either to the left or right of the header text. Adding the custom CSS above did not work – it seemed to do nothing at all.

My site is here.

Also, once I position the header image properly, I would like to have a slide show in the header image.

Thanks much,
Ed

November 1, 2015 at 11:39 pm #78971
Sakin
Keymaster
@Edward:
1. You can add following css in “Appearance => Theme Options => Custom CSS” box to align header image with site title and tagline.
```
#hgroup { float: left; margin-left: 20px; }
@media screen and (max-width: 640px) {
    #site-logo, #hgroup { display: block; float: none; }
    #hgroup { margin-left: 0; }
}
```
2. To add Slider, you need to go to “Appearance => Theme Options => Featured Slider => Slider Options”. Then select Slider Type, Slider Layout and Enable Sidebar and setup accordingly. For more, refer to theme instructions page at http://catchthemes.com/theme-instructions/catch-box-pro/
November 2, 2015 at 1:39 am #78985

Edward
Participant

Thanks for your very quick reply.
It didn’t work, however. The image is still stuck above the text.

As to a “slide show” for the header, however, I was able to do something with Header Options –> Customize Header –> Random Uploaded Images. Then, the image will change when I change pages or refresh.

As to a slider, if I do that, will it be in the header?

Thanks again,
Ed

November 3, 2015 at 12:13 am #79029

Sakin
Keymaster

@Edward: I don’t see the css that I gave you in your site Custom CSS box.

November 3, 2015 at 2:31 am #79034

Edward
Participant

Sakin,
I took it away when I added CSS that widens the boxes, which I found from one of your other posts.
I just put it back, but result is the same.
I would appreciate any help.
Regards,
Ed

November 3, 2015 at 11:42 pm #79075
Sakin
Keymaster
@Edward: oh ok I found it. Replace the previous css that I gave you with the following css:
```
#site-logo { float: left; }
#hgroup { float: left; margin-left: 20px; }
@media screen and (max-width: 640px) {
    #site-logo, #hgroup { display: block; float: none; }
    #hgroup { margin-left: 0; }
}
```
November 4, 2015 at 12:15 am #79080

Edward
Participant

Thanks again.

Sorry to be a pain, but what would I change if I wanted the photo to the right of the text?

If I move the photo to the right of the text in the computer version, I assume that it will move the text to be on top of the photo in the mobile version. (Right now, the photo is above the text in the mobile version.)

Thanks,
Ed

November 4, 2015 at 8:19 am #79089
Sakin
Keymaster
@Edward: Ok for that, you need to go to “Appearance => Theme Options => Header Options”, check in “Move Site Title and Tagline” and save changes. Then you need to replace previous css with the following:
```
#hgroup { float: left; }
#site-logo { float: left; margin-left: 20px; }
@media screen and (max-width: 640px) {
    #site-logo, #hgroup { display: block; float: none; }
    #site-logo { margin-left: 0; }
}
```
Author

Posts