Hello, I would like my site title and description to go above the header image

Hello, I am trying to personalize a child theme. I would like to have the site title and description display above the header image. I think I need to add a header.php file to my child them and also add some extra css but am not sure how to go about it.

I would also like my menu to be centered on the page and not be towards the left, but have been unable to achieve either one. Thanks for the help!

Here is the link to my site:
I couldn't get the link to show up so I put it in a code box. Sorry <a href="http://rethinkingcatholicism.com"></a>

  • Jack Kitterhing
    • Code Norris

    Hi there @kyle_crosby,

    Hope you're well today and thanks for your question.

    Can you let me know what files you currently have in your child theme? :slight_smile:

    On the menu issue we can either add a margin to the whole menu to move it across or we could text-align the actual menu items, which one would you prefer?


    Kind Regards

  • kyle_crosby
    • Flash Drive

    Hello Jack,

    Thanks for the help.

    I was able to fix the site title problem by adding a transparent space to the top of the header image, so that the site title looks like it is above the image. That is probably easier than adding the code and changing the css.

    For the menu, I also was able to get it to center by adding 650px to the margin. I am wondering, however, if this will affect how it shows up on a smaller screen and on mobile phones. I have found that sometimes adjusting the margins can look great on one screen but not on another.

    Do you think that changing the margins will affect this? If so, would the text-align alternative offer a solution to this problem? At the moment I don't have a way to test this on smaller screens.

    Thanks Jack for the help!

    Here is my css for the menu.

    #header .menu {
    	clear: both;
    	color: #222;
    	font-size: 20px;
        font-family: 'Georgia', serif;
        font-weight: bold;
    	margin: 0 auto;
    	overflow: hidden;
    	width: 100%;
    #header .menu {
    	float: left;
    	width: auto;
    .menu-secondary {
        float: right;
    	padding: 0 0 0 0;
    	position: center;
    	margin: 0 0 30px;
        width: 650px;

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.