How to make h1 and h1 both render on the same line

Question

Hello i got this problem with my logo and one text in wordpress.

I want my logo to have a text after it with this code that i use

                        <?php if ( $logoImg || $blogname ) { ?>
                            <div class="site-branding <?php if ( ! display_header_text() ) { echo 'hide-header-text'; } ?>">
                              
                                    <h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a></h1>
                                
                                   <h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                                
                            </div>

And the result is this image

And i want it to be like this

So i tried these codes

<h1 class="site-logo" style = "
display:inline;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a></h1>
                                    
                                       <h1 class="site-logo" style = "
display:inline;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

And this one

<h1 class="site-logo" style="text-align:left;float:left;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a></h1>
                                
                                   <h1 class="site-logo" style="text-align:right;float:right;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

But i had no luck. Can someone help me?

Update 1:

The page is here

http://expertalbert.com/

And also i have tried to put it in one line

<h1 class="site-logo" style="display: inline;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

And without the "display: inline" in the one line h1. Thanks a lot in advance.

I would go for only 1 `h1` element, a left-hand padding and the logo as a background image. — jeroen, Dec 10 '15 at 19:45
Is there any chance we could get a link to where this is happening? There could be other styles at work causing this to happen. — Joe, Dec 10 '15 at 19:46
@jeroen oh i also tried this one too.. i will update the answer for both — Konstantinos Natsios, Dec 10 '15 at 19:49
You should also really _really_ avoid those inline `style="..."` and create CSS style rules instead - preferably in a CSS file all of your pages can share, not a ` — Stephen P, Dec 10 '15 at 20:08

score 4 · Accepted Answer · answered Dec 10 '15 at 19:59

4

Try adding a display: inline-block; to your h1 elements

answered Dec 10 '15 at 19:59

Steffi A.

825
1
14
15

score 2 · Answer 2 · edited May 23 '17 at 12:07

2

Try using display: flex on the container:

#masthead .site-branding {
    display: flex;
    width: 250px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    vertical-align: middle;
}

For alignment options see: Methods for Aligning Flex Items

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

edited May 23 '17 at 12:07

Community

1
1

answered Dec 10 '15 at 19:51

Michael Benjamin

346,931
104
581
701

It actually does work on your site. Tested with Chrome Dev Tools. – Michael Benjamin Dec 10 '15 at 19:56
i put it on the style.css file and i refresh the home page...But still its not working – Konstantinos Natsios Dec 10 '15 at 19:58
2

@KwnstantinosNatsios I did inspect your page and observed that this css is getting overwriiten with the other css you wrote in your site-banner.css. Disable the one you wrote in site-banner.css and check it out – King Size Dec 10 '15 at 20:02

score 2 · Answer 3 · answered Dec 10 '15 at 20:05

HTML block level elements (display:block) such as an <h1> can be made to display side-by-side in several ways.

float

Floating elements pulls them out of the page flow; to do this you have to float all elements that should appear together, and be sure to clear after the last one.

// css rule to float *all* site-logos left
h1.site-logo {
    float: left;
}

Floating messes up page flow, so for something simple like this there are better alternatives.

flex layout

Using flex layout gives you a lot of power, but there's too much to go into here... you should find a tutorial specifically about flex layout to learn all about it.
A simple start however, is just to set the display to flex or inline-flex ... note that you apply inline-flex to the parent container of the elements you want to arrange, so CSS would be

.site-branding {
    display: inline-flex;
}

Flex is well supported in newer browsers, so if you have to support older ones (such as IE9 which doesn't support flex) you probably would go with the last method I list, as an alternative to flex.

inline-block

Changing the display type from block to inline-block allows elements to display inline (next to each other) while retaining many block qualities, such as fixing the height and width. This would simply be

.site-logo {
    display: inline-block;
}

In all cases here, though, a logo is not really a level-1 heading so revised markup may be a better approach.

score 1 · Answer 4 · answered Dec 10 '15 at 19:56

I would need to inspect the rest of your code to be able to tell you for sure how to fix this. But I would float the image to the left or display everything as inline block. Then give your text a line height to match the height of the image. It should center the text nicely with your image. Also you should only use one h1 tag on a page, for SEO purposes it is best practice to only have one.

score 1 · Answer 5 · answered Dec 10 '15 at 20:45

Based on the screenshot you shared, I believe that

Your first attempt did not work because there is not enough space for both elements to fit in one line which resulted in a line break
your second attempt did not work because you did not appoint a width to your floating elements which can, according to this article, result in unpredictable behaviour

I, personally would nor recommend using two h1's on a page, neither using a h1 to wrap the logo of a website.

however, if you want your first attempt to work, just add white-space: nowrap to the element containing the logo and the text.

score 0 · Answer 6 · edited Dec 10 '15 at 21:06

0

Try and make the image smaller by making the width less than one EM, or try with different pixel sizes, i.e 10px,5px,etc;

  <h1 class="site-logo" style="width:.5em; text-align:left; float:left;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo   $logoImg; ?>" alt="logo" /></a></h1>

edited Dec 10 '15 at 21:06

The Beast

1
1
2
24

answered Dec 10 '15 at 19:50

Charles.G

9
3

style="width:.5em;..." – Charles.G Dec 10 '15 at 19:51
Please don't add extra info in comments, instead edit your anser. – Anders Dec 10 '15 at 20:31

How to make h1 and h1 both render on the same line

6 Answers6