Increase Header Image Height & Logo w/title & tagline

Hi @bethanylmasquelier,

These are changes that need to be made at the code level, and not something we have built into the theme to allow for quick adjustments.

For your first question, you’ll want to adjust the height of the HTML element masthead. You’ll want to add the following code snippet in the section titled ‘Additional CSS’ inside of the customizer. You can get to the customizer from the dashboard by logging into your website and going to ‘Appearance > Customize’ and scrolling down to the ‘Additional CSS’ section.

The code you can use is:

#masthead {
   height: 90vh;
}

You can tweak the value 90 to your liking.

As for the second question, you should also be able to use some minor CSS to tweak the layout of the logo/title/tagline. Just below the code mentioned above, inside of the ‘Additional CSS’ section, you can add the following:

.custom-logo-link {
   float: left;
   margin-right: 10px;
}

So the complete ‘Additional CSS’ section should look similar to the following when all is said and done:

#masthead {
   height: 90vh;
}

.custom-logo-link {
   float: left;
   margin-right: 10px;
}

Let us know if that helps!

Evan

Thanks! I wound up asking my sister to create a .png with our logo, name & tagline to solve that issue.

Mast head change is perfect.

Could I get a CSS code for moving the Hero down now that the masthead is larger? I would love to be able to have a code that allows me to change a few numbers and move it down while also seeing how it looks centered, align left and align right.

Thanks a bunch for the help!

Hi @bethanylmasquelier

When you say move the hero down, what exactly do you mean move down? The height or the physical position of the hero?

I would recommend posting in the www.ads-software.com general support forums for some CSS help.

https://www.ads-software.com/support/forum/wp-advanced/