Keeping the Topbar to remain static at very top and not hide during scrolling

Support
#6

Hi @JezUK,

The shortcode will not work on top bar content, please use the HTML content. You can add it like this without specific class icon type

<i class="x-icon" data-x-icon-s="&#xf0e0;" aria-hidden="true"></i>

The important part is the icon code within data-x-icon-s or data-x-icon-b attribute. The icon code is picked from here https://fontawesome.com/icons/envelope?style=solid which became &#xf0e0;. You can create your own HTML for that based on your preferred icons.

Thanks!

1 Like
#7

Thanks, I’m getting there :slight_smile:

I’m nearly finished in that area, I’ve gotten it close (thanks to the support I’ve received on here :slight_smile: ).

I’m just trying now to get all of those elements aligned nicely in the vertical plane (say, vertically ‘centered’).

Please can you tell me how I achieve that ?

(I tried copying my code thus far into this message but I could only copy a part of it)

#8

Hi there,

Please find this code in the Global CSS:

.x-topbar .p-info {
    float: right;
}

then update it to:

.x-topbar .p-info {
    float: right;
    margin-top: 5px;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Here are some related links for further reading:

Hope this helps.

1 Like
#9

Thanks Jade for this - that’s great and works perfectly.

With regards to updates to the theme, if I’ve created a child theme as per the notes in this support group, would that ‘protect’ me as it were from these custom changes being overwritten ?

I ask because I did create a child theme earlier today.

Many thanks.

#10

Hello @JezUK,

We would highly to suggest that you use a child theme if what you are trying to accomplish requires a template customization. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Hope this helps.

1 Like
#11

Thanks RueNel,

I did create a Child Theme as per your child theme link. I did everything in that, including activating the child theme.

I then carried on making my changes to my website.

However, within Wordpress, nothing seems any different. How can I be sure that I am actually working within the Child Theme ? It seemed a very easy thing to create and activate, but I’ve no way of knowing if I am actually working in the correct way with this child theme or whether I am still working on the Parent Theme ?

Please can you guide me ?

Many thanks.

#12

Hi @JezUK,

The child theme installed has usual folder name of x-child while parent has x ( then pro-child and pro for Pro theme). You can check in Admin > Appearance > Themes to see all themes, then make sure the child theme is active.

If you’re just doing some changes within the admin, like Theme Options CSS and elements configuration then it’s okay with or without a child theme since they are saved in the database. You’ll only worry about the changes if you’re directly editing the style.css or other files in the theme and it should be done through FTP or File manager and within the child theme folder. As far as the changes done in this thread, it doesn’t require a child theme. But it’s good to have that if you plan to have file/template customization in the future.

Thanks!

#13

Hi Rad,

First off, I’m not using the Pro version of this Theme.

I’ve created the Child Theme, and activated it, and have been working merrily away on my website, but when I look into the Child Theme structure within FileZilla, I don’t see anything of any importance at all within the Child-x folder. This to me implies that I am not actually working within the child theme ??

I’ve noticed in other documentation that I need to copy over from the parent folders to the child-x theme folder the files which have been changed for my view (in my case the Ethos ones).

But again, the documentation is unclear to me, because it says copy those folders over and that’s it ! But I cannot understand WHAT is instructing the software to go and work on the Child-x files rather than the ones which would still be in the Parent folders ??

As you can tell, I’m confused and I don’t want to have to do my changes over and over because I didn’t set up the Child Theme correctly and was working off of that to begin with.

#14

Hi @JezUK,

The child theme installed has usual folder name of x-child while parent has x ( then pro-child and pro for Pro theme). I only use the Pro screenshot as a sample, and it has written text of Child Them regardless of X or Pro.

Yes, your child theme is still empty since you’re not adding anything to it yet. You don’t have to copy anything unless you know what you’re trying to customize. My question is, what changes you’re doing that requires the child theme? As I said before, the changes recommended in this current thread does not require a child theme :slight_smile:

May I know the files you’re trying to edit that requires a child theme?

Thanks!

#15

Hi Rad,

This had been suggested to me earlier in this thread (see quote in bold below) and it made sense to me at the time because I didn’t want my website to get messed up when X is next updated.

So I thought whilst my website is still new and relatively ‘empty’ still, it’d be a good thing to set up that Child Theme.

Remember, it was the tweaks I was asking about, eg the Topbar change, that made your colleague make the suggestion that I create a Child Theme.

My question is; how do I know what tweaks I would like would be better off in a child theme or not ? How would I know that ?

"Hello @JezUK,

We would highly to suggest that you use a child theme1 if what you are trying to accomplish requires a template customization. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices2.

Hope this helps."

It sounds to me as though the Child Theme is a good thing to set up in practice and then my understanding is that ONLY WHEN you KNOW that your changes are going to be part of the structure which WILL be overwritten by an update, ONLY THEN do you COPY files over to the Child Theme Folders ? Is that correct ?

In which case, someone like me wouldn’t have a clue whether what they are about to change is something that will be overwritten by an update. I think that is where my first confusion lay.

Many thanks for your assistance. I appreciate your patience in trying to explain this to me :slight_smile:

#16

Hi @JezUK,

We would highly to suggest that you use a child theme1 if what you are trying to accomplish requires a template customization.**

It was about template customization IN CASE you’re trying to do template customization, and the top bar change in this current thread is about just CSS and not template customization.

Sorry for the confusion, if you’re just asking about if you really need a child theme for the simple CSS change then you don’t need it :slight_smile:

I was just curious if you’re trying to do some customization other than what’s provided on this thread.

Thanks!

1 Like
#17

LOL,

Everything I’m doing for me is a ‘customisation’ :slight_smile:

Sounds as though I did the right thing to create a child theme - no harm done.

Then, if/when I get advanced enough to even understand what a template customisation would be, I’m sure by that time I’ll know that certain files would need modifying in which case, I would then know that those files need to be copied over from the Parent to the Child folders :slight_smile:

I think I’m fine now with the concepts :slight_smile:

I really appreciate all the help from all of you - the support here is fantastic and I’m getting more and more confident each and everyday :slight_smile:

Many thanks !

#18

You’re most welcome and glad we could always help :slight_smile:

#19

I upgraded to Pro so that I could make use of the issues I was told I would continue to experience if I continued to use X and I now have problems with the Menu bar remaining sticky and basically not behaving at all as I want.

Basically, I want EVERYTHING in my menu to remain at the TOP and my ‘topbar’ nor my menu bar to scroll and hide/unhide like it is doing.

Also, one of the other MAIN reasons I was advised to go to Pro was so that when I chose a menu option, I would have control over exactly where my scroll would go to (in X it goes beyond where I would like it to scroll to on my one page website).

For example, click on About Me and it scrolls to the top of the title text “About Me” (whereas I’d like it to actually scroll to the top edge of that white background of that Section).

Click on Home and I want it to scroll to the very top of the website. Instead it scrolls just short.

My website is;

Please can you advise ?

Thanks

#20

Hey Jez.

Please remove the custom Javascript code in Theme Options > JS. That is the one conflicting with the offset of Pro.

In Pro, sticky bars height are taken into account for the one page navigation offset out of the box. There’s no configuration required. Please watch the video below:

Hope that helps.

1 Like
#21

Thank you sooooo much :slight_smile:

That fixed it :slight_smile:

Thank you, thank you thank you !

#22

You’re welcome.

#23

I will add though, that that js was put in to control the speed of the scrolling - is there anyway I can control the scroll speed using Pro ?

#24

Hi Jez,

Unfortunately, there is no option to control speed in the theme, you have to use the script.

Thanks

#25

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