Replicating https://theme.co/x/ header look with Pro theme

Can you please take a look at my header. I would like to know if there is a way to apply a setting akin to “Align Self: Stretch” to the clickable image on the left of the menu.

Also, is there a way to make clicking on the image scroll back to the beginning of the site, instead of just reloading the homepage, like I have it set now?

Thank you.

Hello There,

To resolve this issue, simply edit your header and click the image logo. In the url or href setting, use only # or #x-root.

Hope this helps. Please let us know how it goes.

Thank you for the assistance. This is what I was looking for.

Can you also help me with the 1st part of my post:

Can you please take a look at my header. I would like to know if there is a way to apply a setting akin to “Align Self: Stretch” to the clickable image on the left of the menu.

Hello There,

Please check this out:

And make sure that the padding is as little as possible. Bigger padding will no longer give the ability to stretch. If the image is still small, you may need to set a width for the image.

Hope this helps.

Thank you for the assistance.

Is there a tutorial I could use which explains how to make pro theme webpage mobile-friendly, mainly how to make the mobile navigation menu?
Just enough to get me started.

Thank you.

Hi,

For mobile button you can use either of these elements.

Navigation collapse
Navigation Dropdown
Navigation Modal

You can hide these mobile buttons on desktop under Customize Tab

Kindly review again the link below

Thanks

1 Like

Hello,

I am having more trouble than I should trying to use the Titillium Web font (or any Google font) with the Cyrillic subset, but I can’t manage to render the font anywhere where I write with Cyrillic characters, the Latin characters are rendered in the selected font without any issues.

Thank you.

Hi There @c.economides

Did you follow our font manager guide here (https://theme.co/apex/forum/t/font-manager/101).

If you’re still having issues, could you please provide us with screenshots and steps on how to replicate that issue, so that we can test it on our end and assist you further.

Thanks!

Hello,

Yes, I followed the guide.

For instance here, it may not be immediately noticeable, but only the text in latin ‘ULTIMATE CELL’ is with the correct font in header nav bar. The text in Cyrillic doesn’t change, regardless of which google font I choose. In options I have selected the Cyrillic subset.

Hi,

Please note that only fonts that support cyrillic will work. Titilium does not support Cyrillic so your font is reverted to a sans serif.

You can check the link below for the fonts that support Cyrillic

Thanks

Thank you for the assistance.

I am trying to adjust the right margin of the TABS field on my website ultimatecell.bg (I have shared the login data for the site above). Can you help me find out what I need to adjust to bring the right part of the tabs to the same position that I have on the left side.

Thank you.

Hello There,

Could you please point us where is the TABS you are referring to? Is it in the menu or in the tabbed content area? Could you please clarify a little further how it would look like?

Thank you in advance.

Hello,

I am trying to stretch the TABS in the content area like I have illustrated with the arrows in the screenshot.

Thank you for the assistance.

Hi There,

The tabs look full width on my end:


Did you sort it out?

Regards!

Not sure how I did it, but sure enough now it appears the way I wanted it on my end as well.

Thank you.

Great! It’s good to know that.
If you need anything else we can help you with, don’t hesitate to open another thread.

I could open a new thread, but it doesn’t seem practical, since I have a tiny issue.

Is there any way to adjust the relative font size of just the tabs text in the red boxes? I can adjust their relative size through the inspector but then the text in the tabs increases as well.

Thank you.

Hi @c.economides,

Please add this CSS to your global custom CSS if you wish its font to scale according to device width.

.x-tabs-list .button {
    font-size: calc(15px + 1vw) !important;
}

The 15px is the base size added with 1vw for scale. You can change it to fit your preference. This should serve as a guide only and we don’t provide supports to any provide custom CSS and codes.

Thanks!

Is this were I’m supposed to put it? Because if it is, it isn’t affecting the size of the font no matter what value I put in px.

Hi @c.economides,

Yes, should be there but there is a typo error on my given CSS. Please change it to this

.x-tabs-list button {
    font-size: calc(15px + 1vw) !important;
}

A dot :slight_smile:

Thanks!

1 Like