X PRO header - customized buttons

Support
#1

Hi,

On my main page https://tarekrabaa.com/ar/ i used X PRO header.
I have 2 buttons with Javascipt.
The button to the left open the menu SF and to the right was opening the X nav icon. X mav icon which was on the top upper left disappeared when i added the Header with X pro.

I would like to have nav X icon back.
I would like to add a button with the function on click and on touch to take me down in the page.
Also, I want to reduce the space between the header and the content of the page.

Thx in advance

#2

Hi There,

1 - Regarding the X Nav Icon you mentioned

Was the X Nav Icon you are referring to addded using the Header Builder?

Is the element still present on the builder but cannot be seen on the front end?

Can you elaborate more on that so we can understand the issue.

2 - You can add an ID to the specific setion which you want it to scroll to, for example, ID: my-section

And link the button to #my-section

3- To reduce the white space on top of your page, you can click on your first section on Cornerstone and remove the 45px padding that is setup. You also can add the class man to your first Custom Headline element and it will also reduce the spacing even more if necessary.

Hope it helps

#3

Hello,

Plz check the url htpps://tarekrabaa.com you can see the x-btn widgetbar on the right top corner.
It disappeared when i used the header builder.

What is the JAVA script command for scroll that work on click and on touch?

thx

#4

Hi there,

The widget bar is not applicable for header builder, I tried some workaround but it’s not working since the header builder uses different templates and filters.

As for javascript, it depends on the target, what button and where it should scroll? Or are you referring to one-page navigation? It’s not yet fully supported by header builder.

Thanks!

#5

ok.
I need a jquery function just to scroll down on clicking an icon or button i will place in the header. i need to scroll to another section in the main page
Another question: when one page navigation will be supported

#6

Hey There,

One page navigation is still on going in development in Pro theme. We do not have an ETA yet.

If you want to scroll down upon clicking on an icon or button, please ensure that your section has a unique ID for example about-me as a section ID. In your header, you insert a button or an icon with a link which will link to #about-me. Clicking the link should scroll the page to the right section.

Hope this helps.

1 Like
#7

Hi,

Please i need smooth scrolling using Javascript.

thx

#8

Thank you for your message.

As my colleague described, the functionality has problems in the Pro theme and you need to wait for an official release as it needs refactoring of the code for the header builder.

There is a workaround regarding the One Page Navigation which is not 100% bulletproof but at the moment is the only workaround that we can offer at the moment:

Thank you for your understanding.

#9

Hi,

Can i move the location of x-btn the widget to the content under the header?

#10

Yes, you need to delete the element from the header builder and set it up manually in the content builder. If you mean move it by drag and drop or other means, that is not currently possible.

Thanks.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.