[Silvia CParticipant]

Dear support,
I apologize for opening a new thread but I tried searching the forum with no success. My website (temporary url) is http://pantarei.wpengine.com
Here is the point: from what I’ve understood about header content, the choice is between a text OR a logo, not both. Is it really so? I happen to have an old banner from which I took the logo only, but I could use some text too, just a word: it looks somehow “empty” at the moment! It would be perfect to have my little square logo and, on its right, the name of the site: “Pantarei”. Is there a way to do so? THANKS!!! 🙂
Silvia

[ChristianModerator]

Hey Silvia,

In the Customizer > Custom > CSS, please add the code below.

.x-navbar-inner h1.visually-hidden {
clip: auto;
margin: 0;
font-size: 40px;
color: white;
width: 190px;
height: 35px;
margin-left: 152px;
margin-top: 25px;
}

Hope that helps. 🙂

[Michelle MParticipant]

Thank you that was very helpful, however the font is only showing up on the Home page, not on the header of every page.

[Michelle MParticipant]

Also, is there a way to customize that specific header font so that it is different than the rest of the layout?

[ChristianModerator]

Hey Michelle,

That is weird because it should work sitewide. Upon checking your site, I see that you’re using an image. That looks good. Do you still need the modification? You can change the logo font in the Customizer > Typography.

Thanks.

[Michelle MParticipant]

Yes. As you can see on the Home page, it has the logo and the header “Michelle Martini” but it is not showing up on any of the other pages.

[Michelle MParticipant]

Also, Yes on the Customizer you can use the Logo Font, but with the CSS code you provided, the font that shows up in the Header is not the logo font, but the header font used for the site.

[RadModerator]

Hi Michelle,

As of current X theme, it is not possible to use both image logo and text logo. But you can achieve this on css.

Just be sure you remove Image logo to enable your text logo. Then add this css to your customizer > custom > css

.x-navbar-inner h1.visually-hidden {
padding-left: 40px; /* assume that your logo image is 40px width */
height: 40px; /* height of your image logo */
background: url(http://path/to/your/image/logo/40x40) no-repeat left;
}

Hope this helps.

[Michelle MParticipant]

This did not work.. but thank you

[RadModerator]

Hi Michelle,

If you will need more assistance, we’re here ready to help, anytime. Thank You.

[Leslie BParticipant]

Michelle –

I was able to achieve logo and text in the header by adding the following to the custom CSS.

.x-navbar {
	background: url(PATH TO IMAGE HERE) no-repeat 20px;  /* adjust the 20px for how far you want your logo from left side of header bar */
}

.x-navbar-inner {
	padding-left: 90px; /* moves the text version of the logo over to the right to make room for the logo width */
}

Adjust these two numbers to fit your logo dimensions.

Hope this helps!
Leslie

[AlexanderKeymaster]

Hi Leslie,

Thanks for sharing your solution here!

[Rob DParticipant]

Hey Michelle,

Thanks for the code. Any idea how to remove the logo when being viewed from a mobile site. It’s currently squashing everything together.

Cheers,

Rob

[SupportMember]

Hi Rob!

You can add this on Customizer > Custom > CSS if you want to remove the logo on mobile:

@media only screen and (max-width: 767px) {
.x-navbar .x-brand {
display: none;
}
}

Place it at the very bottom.

Cheers!

[derekv_sParticipant]

Hi,

I’m trying to include logo and text in the header. I’m using the recommended CSS code:
.x-navbar-inner h1.visually-hidden {
clip: auto;
margin: 0;
font-size: 40px;
color: white;
width: 190px;
height: 35px;
margin-left: 152px;
margin-top: 25px;
}

but it only changes the main page and not any of the other pages, what do I need to do to allow my logo and text on every page.

Thanks,

Derek

[Author]

Posts