Header Image and site Title adjustment

HTML & CSS
1

How to adjust the position of site title with logo in header section? I want to lift my site title to little bit up, the logo position is ok how to do it? Any help will be appreciated. My site url is http://www.aas-bd.com.

2

Hi aasbd. Welcome to the forums. :slight_smile:

You could do something like

#site-title a img {
  vertical-align: middle;
}

… though you may not like the result. You have a few options, such as adding the logo as a background image instead, which would give you a lot more flexibility.

3

Your instruction worked very well. Thanks for your help. Is it possible to lift up the site description too? I mean if I want to keep site description just below the site title, then how can I do it?

4

Rather than make the subtitle an <h2>, include it as part of the <h1>. Wrap it in a span, set it to display: block, and set an appropriate font size for it.

5

Please tell me in details. I mean in which part of my child themes should be edited?

6

That sounds like a WordPress question. I guess you’ll have to look through your templates to find where that code is stored. If that’s a problem, we could move this thread to the CMS forum.

7

I got it from header section. h1 and h2 are located in header section. I am not sure where I have to change. So, I have copied it for you. Please tell me how it will be changed?
<h1 id=“site-title”><span><a href=“<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=“<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=“home”><img id=“site-logo” src=“<?php echo get_stylesheet_directory_uri(); ?>/images/aaslogo2.png” alt=“” /><?php bloginfo( ‘name’ ); ?></a></span></h1>
<h2 id=“site-description”><?php bloginfo( ‘description’ ); ?></h2>

8

You could try something like this:

Change that code you posted to this:

<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img id="site-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/aaslogo2.png" alt="" /><?php bloginfo( 'name' ); ?></a></span> <b id="site-description"><?php bloginfo( 'description' ); ?></b></h1>

And then change the CSS for #site-description (at line 37 of style.css) to this:

#site-description {
  color: #352CE6;
  font-size: 14px;
  font-weight: normal;
  display: block;
  padding-left: 60px;
  margin-top: -20px;
}
9

Thanks a lot for your timing and help. The problem was solved.

10

Glad that helped. :slight_smile: