Trying to duplicate an existing site with X Pro

Support
#1

Hello,

I am working to rebuilding this site in X Pro…
Old - http://www.amsterdamavenue.com/
X pro site- http://mezzalunabrewster3.cuisinehunter.com

I just upgraded to X pro to get the transparent menu but having lots of issues…

  1. Menu location on hompage - I cant seem to get the menu back to the right. I cant seem to adjust the contain back to the correct spot.
  2. Menu design- How do I change the font/size/color of the menu? It’s currently in black and cant seem to get it to change to white
    3- Fonts - Loaded the fonts in this folder as suggesting in another post…/mezzalunasub3/wp-content/themes/pro/framework/fonts
    and loaded it in the CSS as this…
    @font-face {
    font-family: ‘Ambroise’;
    src: url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.eot’);
    src: url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.eot?#iefix’) format(‘embedded-opentype’),
    url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.woff’) format(‘woff’),
    url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.ttf’) format(‘truetype’),
    url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.svg’) format(‘svg’);
    }

But it doesn’t show up when I try to choose it in the drop down?

4- The collapsed navigation button on mobile view…it’s round how can i change it to square? Also having trouble with the container and getting it the right side of the screen like the original site. it also messes up the site title on mobile view.

These are the only four things hold me back from completing. Can you please assist with this?
Thanks
Bruce

#2

Hi There,
Thanks for writing in!

Before I answer your questions, I would like you to check this article if you have not already regarding Header and footer builder, so that you can have a good idea about the editor. https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103

Coming to your questions:

1- regarding the menu alignment and structure, please follow the structure I have mentioned in the screenshot below.

2- Please refer to the screenshot below to change the font/color and size of the menu.

3- To load the font family, please use template by clicking the line menu in the left corner. Then create your font template by choosing the font family and other options.
Refer to the screenshot.

After save the template go back to header editor again and edit the menu, Now you can see the font family there.

If that doesn’t work please send us your login and FTP details in a secure note so that we can have a look.

4- regarding the collapsed navigation, you can make it square by changing the border radius to “0”. Please refer to the attached screenshot.

Regarding the position things you can refer to the article for the content structure. If that doesn’t help please send us your details as mentioned above.

Thanks

#3

Hello Basanta,

Thanks for the screenshots…it was very helpful. I was able to get most of the things i needed to adjust completed. I am still having trouble with a couple of things…

  1. FONT- Still having trouble with the font…I tried using the template as you mentioned but the font is not showing up as a choice.
  2. Mobile view…I have been trying to adjust the font size on the mobile view so that the title is on one line but having trouble. When I reduce the size of the font it changes it for all views and it looks small.
    3- Collapsable menu…How can I tell the header to use the collapsible menu for Mobile/Table but not on laptop/computer views…see below. Also why does both show up on some screens?

I will send login and FTP info incase you need it.

#4

One more question…How do I move containers within the header?

#5

Hello There,

Thanks for updating in!

1.) After setting up the font templates, in the header builder, you will still need to adjust the font size. For the font size, you can use em, rem or px.

2.) You can make use of two bars. One bar is for desktops and the other bar is for the smaller screens. Having this set up will enable you to set the font sizes for each respective screen sizes. You can then hide the bars by using the “Hide During Breakpoints” option.

3.) Please click the navigation collapse and find the “Customize” tab. You can make use of the “Hide During Breakpoints” and select which screens the navigation collapse will be hidden away.

4.) You can simply drag the containers so that you can re arrange their order. You can only drag them within the bar. You can drag them over to another bar.

Hope this helps.

#6

The Font is not showing up for me to create the template. Try it your self.

#7

I tried using two bars on this…I have the font size to 13px which is very small and the text for the title is still showing up on two lines in mobile view.

#8

I understand dragging the container down in the layout section but on my home page the container containing the text for my site title…if I wanted to move that to the middle of the bar. How would I do this? I tried dragging the container on my page and it doesn’t work.

#9

Hello There,

Thanks for updating in!

Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

I have temporarily deactivated your caching plugin so that we can see the changes right away.

1.) I have created a new font and applied it to your header. Please check out my screenshot.

2.) In smaller screen, please remove the margins and paddings of your text element. And also please keep track of the width of your text element. You might need to use a small font if you want only one line. The width of the text element (using font size 13px) is at least 280px which will always be a two lines of text because there is no longer enough space.

3.) If you want to move the contents of the container to the center, please play around with the Self Flex and Flex Layout position.

Hope this helps.

#10

Ok so I know how to add Fonts to build the header…but the Font I was trying to add is the one below…It’s not showing up as a font to select…

3- Fonts - Loaded the fonts in this folder as suggesting in another post…/mezzalunasub3/wp-content/themes/pro/framework/fonts
and loaded it in the CSS as this…
@font-face {
font-family: ‘Ambroise’;
src: url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.eot’);
src: url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.eot?#iefix’) format(‘embedded-opentype’),
url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.woff’) format(‘woff’),
url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.ttf’) format(‘truetype’),
url(’/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/Ambroise-Regular.svg’) format(‘svg’);
}

#11

Hi there,

That’s not possible, it’s only added in CSS (styling) but it’s not directly added to the system/core fonts. Hence, you’ll have to use CSS to apply the font to the elements too.

Example,

h1 { font-family: 'Ambroise'; }

Thanks!

#12

How do I apply it? I need to apply it in three places…

The headlines in this page…http://mezzalunabrewster3.cuisinehunter.com/menu/
and the site title and Menu on the main page…http://mezzalunabrewster3.cuisinehunter.com/

#13

Hi there,

You can apply it the same way you added your @font-face CSS. Like adding it on your global custom CSS. Plus, it’s a sample, it may vary depending to which element you wish it applied and sometimes you’ll use !important if necessary. Example,

.x-btn {
font-family: 'Ambroise' !important;
}

Which elements should have this font?

Thanks!

#14

I need to apply it to these three items

#15

Hi there,

It should be like this,

h1.x-text-content-text-primary, .hm3.x-text, .hm5.x-menu > li > .x-anchor .x-anchor-text-primary, .hm11.x-menu > li > .x-anchor .x-anchor-text-primary {
font-family: 'Ambroise' !important;
}

I combined all the selectors for those elements since the styling needed to be applied is the same.

Thanks!

#16

so add that to the global CSS? and it should change the fonts in those elements?

#17

Hi there,

Yes, please add that CSS to your global custom CSS. And should change those element’s font, BUT, I noticed that your font URLs are wrong.

/mezzalunasub3/wp-content/themes/pro/framework/fonts/Ambroise/

You should change them to

//mezzalunabrewster3.cuisinehunter.com/wp-content/themes/pro/framework/fonts/Ambroise/

Thanks!

#18

Thank you…I made the changes as you suggested and it looks like the new font is loaded. Although i still see the old font on some of of the other view…like when looking at the mobile sites. How do I change that?

Also how can I change the fonts in the slider?

#19

Hello There,

That is because only the text for desktop is added in the code. We need to update it and include the text for smaller screen. Please have the code updated and use this code:

h1.x-text-content-text-primary, .hm3.x-text, 
.hm9.x-text,
.hm5.x-menu > li > .x-anchor .x-anchor-text-primary, 
.hm11.x-menu > li > .x-anchor .x-anchor-text-primary,
.hm12.x-menu > li > .x-anchor .x-anchor-text-primary{
  font-family: 'Ambroise' !important;
}

Hope this helps. Kindly let us know.

#20

I just added the codes to the global CSS and it didnt change anything.