Header & Menu

Dear Feldstein,

please try to add this custom CSS (just change the margin-top value if needed):

@media screen and (min-width: 1012px) {
#wrapper .header-logo {float: right; margin-top: -50px;}
}

Best regards,
Tomas Toman

Dear Tomas,

it works great. Thank you so much for your effective support.

Kind regards
Feldstein

I can’t figure out how to add my site title as well as logo. I saw the above comment, but I can’t find that code in my website. Can you please help so I can have both the site name as well as the logo in the header?
https://www.jmbfishingtournament.com

Also, what font is the default font? I really like the header font, but don’t know what it is called because it just says default.

Thank you

Hi @jmbfishing,

the code that you need to edit is shown in this reply. The code is located in “header.php” on lines 55 – 59. You can edit it directly in “Appearance > Editor”, but a better way is to create a child theme to avoid overwriting your customizations when you update the original theme.

The default font used for the Site Title and other headlines is “Oswald”.

Best regards,
Tomas Toman

I saw you helped someone above to put them side by side. Is there anyway you can help me put the logo on the right side and the site title on the left? I would like them to both be centered on that side.

Thank you

I think i would have to change it to float left, but then the site name is in the way. How can I move it so the site name is centered to the right of the logo?

Thank you

If possible, please change the mentioned code in “header.php” so I could see both the Logo and the Site Title in your header. At this moment, I can see only the Logo there so I am unable to provide you the appropriate CSS with your current header configuration. Thank you.

Best regards,
Tomas Toman

Hi Thomas,

I am very sorry I didn’t hit save last time. Please take a look now.

Thank you for your help!

Hi @jmbfishing,

thank you for updating it. Please add this custom CSS to center the Site Title vertically:

@media screen and (min-width: 1012px) { #wrapper .site-title {top: 120px;} }

If you would like to move the Site Title more to right, then you can add the “left” property:

@media screen and (min-width: 1012px) { #wrapper .site-title {top: 120px; left: 20px;} }

Best regards,
Tomas Toman

Hi Tomas,

Thank you very much for all of your help! I couldn’t be happier with my experience!

I have one more question. Is their a way to set my theme to wide but yet still have the white background on the header? I am wondering because when I change it to wide, then the white background goes away and my logo has a white box around it so it looks silly being over the blue background.

Please let me know if you’d like me to change it to wide now so you can see what I am talking about.

Thank you in advance.

Kassie

Hi Kassie,

I am glad that I could help you!

If you would like to set white background for the header area in the Wide layout, please add this custom CSS:

#wrapper #header {background: white;}

Best regards,
Tomas Toman

Thank you.

Is there anyway to make it so the blue still comes up on the side? (as if the header was in the boxed setting)

Hi Kassie,

if you would like to have the header area in “boxed” layout, then please replace the previously suggested CSS with this one:

#wrapper .header-content {background: white;}
@media screen and (min-width: 1170px) {
html #wrapper .header-content {display: inline-block; left: 50%; margin-left: -585px;}
}
@media screen and (min-width: 1012px) {
#wrapper .header-content {display: inline-block; left: 50%; margin-left: -506px;}
}

Or if you would like to get rid of the white background in your logo, I recommend you to edit the logo image in a graphic editor and save it as a transparent image without the white background (in PNG format instead of JPG).

Best regards,
Tomas Toman

Thank you very much.

I have one last question. Do you know how I can have the titles on the pages go away? For example, my home page just has that bar because I didnt give it a title, but any other page has the title with a white box around it.
https://www.jmbfishingtournament.com/john-michael-baker vs. https://www.jmbfishingtournament.com/

Thank you again

This custom CSS allows you to hide the background around page titles:

#wrapper .entry-headline, #wrapper .entry-headline-text {background: none;}

If you would like to completely hide the title area on some pages, please select the template “Page without Title” or “Full Width without Title” in the right side panel “Page Attributes” when you edit a page.

Best regards,
Tomas Toman