Typekit & Header Question

Support
#1

Hey everyone.

I’ve got a few questions. First regarding the header (builder).
I want to set the header menu so that there are three containers in one header bar, so that it looks something like this:

Container 1 (Header Menu 1) – Container 2 (Image/Logo) – Container 3 (Header Menu 2)

So far so good, now I want these three containers to be centered in the header bar, I also accomplished that. Now my question or problem is that between the middle container (container 2) and the containers right and left of that one, there is quite a lot of space, more than I want it to be. I set the margin and padding of all three containers to 0. How can I adjust the space between the containers?

Edit: I finally found the option to set single Headline elements with Typekit fonts, so this topic is solved. But now I got 1 (maybe 2) problems. First, when I go to the Template Manager -> Fonts when I create a new template with a Typekit font, the preview won’t show the correct font. When I use that template later within an element, the font works but not in the preview, so this is not dramatical but I was still confused.
But now the main problem: When I’m editing a page with the content builder and use a Typefont Font Template in the text format -> font family section of an element, e.g. Headline, all the elements turn white in the content builder. They’re still there but I can’t see them. Reloading doesn’t help. In live version of the page everything is fine, only in the content builder it’s all white. (And also I can’t select [click on] classic headline elements within the content builder that is white. So right now I got 2 headline elements above each other, one new detailed element and one classic element.)

Thanks in advance!

#2

Hi there,

I suggest that you separate each individual question in a separate thread, that will help us to identify the issue faster and give you a better suggestion, and it will help our other customers which may have the same question, find this thread easily by the correct title.

Regarding the containers, I suggest that you have only 1 container and add 3 items there. Then in the flex options of the container, you set the horizontal option to space around:

Then, to adjust the spacing between element you can apply a maximum width of for example 75% to the container:

This is a suggestion and it might be other ways to achieve the look you want. I suggest that you watch the video below regarding the tips and tricks (Flexbox section):

https://theme.co/apex/forum/t/pro-tips-and-tricks/214

Regarding the preview, that is correct, we will work on that for the future releases, there is a problem accessing to Typekit font face from iFrame which we use to show the preview. Thank you for mentioning that.

The last point you mentioned seems to be a bug which we need to take a closer look. Would you please kindly open up a new thread and add a test page which only has the problematic stuff to investigate and give us the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post?

Thank you for your patience and cooperation.

#4

Thanks for your answer.

Alright, from now on I will always open a new thread for every problem, thought this way it might be easier for you but no problem :slight_smile:

One thing still does not work properly. In the header I now put all items into 1 container and set the horizontal option to space around. But now the middle item (the image/logo) is not in the center anymore, since the item on the right (menu 2) is longer than the other side (i guess?). Is there a way to “fixate” the image in the center, kind of like an anchor, so that the other items left and right will revolve around the image?

I will open a new thread for the font family bug soon too.
Thanks in advance!

#5

Hello There,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? We would like to check how did you set it up.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.