Need Help with my Header!! Please!

Hello,

Have you edited your theme’s CSS? It appears the height CSS for your header image in your theme’s style.css on line 1606 is incorrect (see here). The height has “340x” instead of “340px” — that is the reason the logo is appearing so small. If you have, don’t do that, make sure to create a child theme and override any custom edits. If you don’t all edits will be removed when you update the theme.

The image uploaded from the original I see is 597px x 143px. Is it being resized?

Try adding the following code your custom CSS (in a child theme or the native way):

.header-image .site-title a {
  width: 50%
}

.header-image .site-title > a {
  height: 143px;
  margin: 0 auto;
  max-width: 100%;
  min-width: 300px;
}

.header-full-width .title-area, .header-full-width .site-title {
  width: 100%
}

.title-area {
  display: block;
}

@media only screen and (max-width: 940px) {
  .header-image .site-header .wrap {
    height: 150px;
  }
}

Kind of a quick fix, but makes your logo look better. I can’t really give any advice on adding the newsletter signup without having it visible on the page. Hope that helps!

Kind regards,
ClicksFix

Thanks clicksFix,

My logo is now the size I want it to be. It has moved back to the center, though. I’d like to get it back to the left.

I have a couple of questions: It appears that you were able to look at the backend of my website, my code. How did you do that? I didn’t know that was possible.

Second,you said “make sure to create a child theme and override any custom edits.” I don’t know how to do that. Are you saying that if I make changes to the code, the changes will be cancelled out when I do an update?

Thank you SO MUCH for your help!

Hello again,

My apologies. I made it centered because I thought it looked better (especially when going into mobile view). If you want it left aligned, you will need to replace the CSS snippet above with the snippet below:

.header-image .site-title a {
  width: 100%
}

.header-image .site-title > a {
  height: 143px;
  margin: 0 auto;
  max-width: 100%;
  min-width: 300px;
}

.header-full-width .title-area, .header-full-width .site-title {
  width: 100%
}

.title-area {
  display: block;
}

@media only screen and (max-width: 940px) {
  .header-image .site-header .wrap {
    height: 200px;
  }
}

I don’t have access to your back-end. That would be very bad if I did. I am making all changes through the browser and not the server (which means once I refresh the page the changes are not saved). This is made possible through Google Chrome’s web tools (by inspecting and editing the element). This makes it easier to make changes on the front-end and then going and applying the changes instead of making a change, saving it, then going and refreshing the page to see if you like what has changed. That’d take a very long time to create anything.

Yes, making a child theme and activating the child theme allows edits to be made and not be overwritten when the theme is updated. If you make changes to the theme manually and then update the theme those changes will be overwritten (and lost). To prevent this a child theme is needed. Here are a few resources to learn how to create a child theme:

• https://optimizerwp.com/wordpress-child-theme/
• https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/
• https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
• https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/