Docs

[blueprint]

Hi guys!
This is the already the 4th website I’m working on with X and I really love and appreciate this awsome theme and your excellent forum and support! However there is a problem I could not solve yet…

Here is my question:
I’m trying to built a full width header where in the logo area there is a Logo as responsive text with a colored background. Using the logo text did not work because:
1. I could not change the text
2. I did not know how to give only the logo area a colored background without affecting the navbar

Right now I managed to insert a fullwidth image (1500px width). This is more or less how it should look like on desktop. But of course it isn’t responsive and the text gets really tini on mobile.

Can you please tell me how to make this work?
Thank you!!

[blueprint]

This reply has been marked as private.

[Paul R]

Hi,

1. You can change the logo text under settings general.

http://screencast.com/t/TK2WFLXO9nt

2. You can add this under Custom > Edit Global CSS in the Customizer.

body .x-logobar {
   background-color:red;
}

Hope that helps.

[blueprint]

Thanks for the quick response! That worked really well. But I realized that the font I wanted to use for the text logo is not a google font (Colaborate Thin). Is there a way to add fonts outside google? I have to admit that I even failed loading additional google fonts to Punch Fonts although I copied the parameters from google directly. Can you tell why?

Thanks to you I was able to change the logobar background, so I could use a smaller png image in the logobar. Is this a good way to handel it?

Last question: There is a fine line underneath the logobar and navar – how can I remove that?

Thank you for your time!!

[Nabeel A]

Hi again,

1. To add a custom font, please refer to this link https://community.theme.co/forums/topic/how-do-i-add-my-own-font-and-use-everywhere/#post-56415

2. To add google font to Punch fonts please follow this link https://www.themepunch.com/faq/adding-my-own-google-fonts/

3. Yes it is a good way to handle it. You can always use custom CSS to customize your site as per your need.

4. To remove the line you can add the following code in your Customizer:

.x-logobar {
    border-bottom: none !important;
}

Hope this helps!

[Author]

Posts