Hello,
I am trying to build a site like the pictures I attached.
Which would be the most appropriate workaround to get that?
Should I start with a Demo and customize it?
Or creat a new custom header?
I am usign X PRO Theme.
Thank you in advance!
All the best,
Marc
Hi There,
As your header is fairly simple you dont need to use a demo.
You can create a new header. Add a Bar > Add 2 containers to your bar > add an Inline menu on the top container and align it to the start and add the logo on the second container and align to the end.
You also can click customize on your inline menu > hide it for mobile and tablets.
Add a mobile menu element on the first container click customize , hide for laptop and desktop.
Regarding the body of your page, once you have create each page in the grid with the respective feature image, you can use The Grid Plugin to create your grid.
Hope it heps
Hi again,
Thank you so much for the help.
I’m totally new at X Pro and was great to have a hint.
I am almost there: https://policromia.es/projectes/
(the grid is not build yet, it is a picture to see how it would look)
I have a couple of questions:
1- How can I highlight in red the “active” item from the menu?
On the settings, I can only find a color for “static” and a color for “hover”.
2- How can I make the font exactly how it looks on my template (it is Futura Bold), but when I press the bold option on the settings it just makes it “thicker” but it is not how the Bold version looks. Can I upload somehow my own font and make sure it will be seen that way from any computer (even if they don’t have the font?).
Thank you so much again.
All the best,
Marc
Hi Marc,
Good Job!
Inside the header builder, click Inline Menu > Top Links > Text > and you will find TEXT COLOR BASE & INTERACTION
You need to adjust the interaction color. Please see image attached.
Futura font is avaliable out of the box with X. You have selected at the moment Trebuchet MS - 400
Please set futura and share your URL so we can compare your version with the document.
Hope it helps
Hi Joao,
Thank you so much for your response!
–1-- COLOR
I did set the interaction color to red, and that works when the mouse is on hover, it goes red.
But I would also need, that the name of the page that we are displaying (projects in this case) is always red when the page is open. I could set that in customizer with a standard menu, but now that is a custom menu, customizer won’t override the settings.
–2-- FUTURA
I did set futura from the customizer menu and in my computer I can see it futura.
Allthoug, its only futura BOOK, and I need Futura light for the text and Futura Bold for the headers and menus.
I have the fonts on my computer, is there a way that I can upload them? Will this be safe and make sure that you can see it in all computers? Thank you so much and I apologise for not knowing further on the topic. I attach screenshot so you can see how it looks now. 
Thaaanks 
PS- Screenshot with mouse overlaying the menu
PS2_These are the fonts I need to use:
Hi there,
Unfortunately, you can’t upload your menu and use it through customizer. Custom fonts are only possible through CSS.
But, you can do this.
Admin > X > Launch > Templates > Fonts and click the T icon just above the save button, and configure your Typekit.Templates > Fonts section, add or edit the existing font templates and configure them to your preferred font (future), you can’t add more templates as much as you want and name it Future Bold, Futura Light, and etc.Admin > X > Launch > Options > Typography and assign the template fonts you created, like assign the Futura Light to the Body.As for coloring, yes, if you configure the interaction color then it will only applied to the hover or active status of the menu. Would you mind providing more details about this?
But I would also need, that the name of the page that we are displaying (projects in this case) is always red when the page is open. I could set that in customizer with a standard menu, but now that is a custom menu, customizer won’t override the settings.
It’s red in your screenshot, and it’s red upon load.
Thanks!
Hi Rad,
Thank you so much for your response.
Typography problem —> Solved!
About the red color on the menu, I will try to explain again (sorry it might be a problem of my poor programming vocabulary):
The thing is, there is two situations where the menu should be red:
1-> when the mouse is on the name of a page (hover) -->> THIS WORKS ALREADY
2-> the page that we are seeing (projects in this case) should be always red when “projects” is open. If we click, for instance, in “contact”, then we go to contact page and “contact” should be red (active item). —> THIS DOESN’T WORK
I still didn’t manage to achieve the second yet.
Thank you again!
All the best,
Hi There.
Seems like you decided to go with Ubermenu.
So in that case, please refer to this link.
Hope it helps
Hi Joao,
Thank you for your response.
Unfortunately that didn’t work.
I wasn’t actually using Ubermenu, i just had it activated by mistake.
So now I deactivated it, but still doesn’t work.
It’s quite a basic function, right?
I am surprised it is that difficult to get… 
Can you please help me here?
Thank you so much.
All the best
Hi There,
Please add the following code to Theme Options CSS and adjust the color according to your desired color.
/* For desktop version */
.current-menu-item > a .x-anchor-text-primary {
color: #8618d1 !important;
}
/* For mobile version */
.x-menu-collapsed .current-menu-item > a .x-anchor-text-primary {
color: #ffc300 !important;
}
Hope it helps!
Thank you so much! It works now
You’re most welcome!
Marc, if you need help just PM me!
Marc, si necessites ajuda, envia’m un privat i et monto la web
Hey There,
Thanks for updating this thread.
I think you should sent a private to Marc directly.
Best Regards.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.