Centering blog title, logo and navigation.

In your header…add a break tag after the image…

<h1 id="blog-title">
                                <a href="https://www.adamleeblythe.co.uk" title="ALB">
                                        <img src="https://www.adamleeblythe.co.uk/wp-content/themes/fluxipress-child/images/alb-logo.png" alt="ALB" />
                                        The Web & Graphic Design Portfolio of Adam Lee Blythe
                                </a>
                                </h1>

[Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

Then modify the style sheet to center the elements in the H1 tag…

No! Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

Thanks assurewd,

and esmi, I am using a child theme.

I’m thinking of using a custom CSS plugin as my child theme (style.css) isn’t updating! However, .php files are!

I should probably create a new thread for this though.

Thanks

There is no child theme visible on your site here:

https://www.adamleeblythe.co.uk/wp-content/themes/fluxipress/style.css

WPyogi appreciate your input. I do have a child theme https://www.adamleeblythe.co.uk/wp-content/themes/fluxipress-child/style.css

I don’t understand as I have made changes to header.php (in my child theme) and can see the changes.

Have you activated it? It’s not what I see on your site.

Yes it’s definitely activated. I’ve used child themes before i can’t think why this is not working?!

See my screen shot

The child theme issue has been resolved, as stated in the other thread.

Centering the title and adding a logo might still be a bit tricky. The #block-title must leave space for the menu button on small screens (just resize your browser to less than 800px width). I guess there’s no easy way to center and not collide at some point, sorry.

I have managed to centre my title and custom logo using:

body {
font-size: 15px;
}

img {
border: 0 none;
display: block;
}

#blog-title {
display: block;
font-size: 4rem;
font-weight: 300;
line-height: 0.8em;
margin: 0.3em 0 0.3em -0.05em;
overflow: hidden;
padding: 0.2em 0 0;
text-align: center;
}

#blog-title span, #blog-title strong span {
font-size: 0.425em;
text-align: center;
}

#blog-title img, #blog-title strong img {
    float: none;
    margin: -0.2em auto 0.25em;
}

#blog-title {
    padding-right: 0;
}

The only problem I’m having now is the rollover transition when you rollover #header and the text ‘Home’ is revealed. It’s a nice touch but it’s not what I want for my website. It looks to me there is some inline styling involved where can I find it to change it?

The simple transitioned rollover on your demo fluxipress website save the gummy bears is awesome. I want my header like this!

Thanks again.

add this to your child theme css:

.gt-800 #blog-title a:after { content: "" !important; }