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

Hello,

I have virtually no experience working with wordpress or building websites, but I did try my best to search the support forum before proceeding with creating a new topic to ask for help.
I was looking for inspiration around the internet for how I wanted my website to look and I immediately fell in love with the way your theme.co/x/ header(?) looks. I want the large hero(?) header (which I have tried replicating on my site using Slider Revolution. The thing I am having most trouble with is having the menu appear at the bottom of the window (exactly the way it is formatted on the theme.co/x/ website) and also I don’t know how to make the menu appear outside the formatting of the header. I am trying to use ubermenu to replicate the menu on your website.

Hello There,

Thanks for writing in!

I have logged in and made some changes to your slider. I change the slider layout to “Fullscreen”. I added also added offset height so that the slider and the navbar will fit right in your browser just like that we have in our Theme.co/x/.

And to make sure menu appear outside of the formatting grid, I added this custom css in X > Theme Options.

.x-navbar .x-container.max.width {
    width: 100%;
    max-width: 98%;
}

Please check your site now.

2 Likes

Thank you for the assistance.

I noticed that ubermenu has been deactivated. Does that mean I can’t use it to replicate the menu of your site? I dare not activate it again in fear I might mess up your changes. If so, can I format the pro theme menu to look more like the menu on your site? Is there a guide I can follow?

Hello There,

I have deactivated UberMenu because it does not apply at the moment. You don’t want to complicate things more when you do not fully understand how the navbar works yet.

Since you are using Pro theme, I would recommend that you create a custom header with a hero slider in it. You can then add a bar that mimics the theme.co/x/ site. To get you started with, please check out this article: https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103, https://theme.co/apex/forum/t/using-flexbox/24851, https://theme.co/apex/forum/t/working-with-navigation/24852

Hope this helps.

1 Like

Thank you for the assistance.

I have added a custom header and I am playing around with it, but I am not sure how to incorporate the ‘offset height’ you did with the default header, so the menu remains not visible below the slider.

I figured it out. You’re supposed to go to ‘Slider Revolution’ -> ‘Slider Settings’, choose ‘Full-Screen’ in ‘Slide Layout’, then keep scrolling down until you find ‘Increase/Decrease Fullscreen Height’ and input ‘.x-masthead’ below it. Press ‘Save Settings’ and you’re done.

Now I have a new question. Is there a way to add the separators between the “buttons” of the menu, again like it is done at theme.co/x/ within the NAVIGATION INLINE element?

Hi @c.economides,

You can easily do that in header builder’s menu setting. Please inspect your inline menu in the header builder and go to Top Links, then set your border like in the screenshot.

Hope this helps.

1 Like

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.