Navigation buttons

1

Hi, I try to find a way to keep action buttons fixed in the browser window so the don’t react on scrolling. I am a non-coder. Is there an easy way to do this in Hype.
I hope someone can help me with this.

2

Set a class to the button (say fixed). Add this code to the <head>:

.fixed
    {
        position: fixed;
    }
3

Hi Hrishikesh,
Thanks for your reply! I am a beginner and feel a little stupid but where and how can I add this code?

4

Add the class name here:

image
image1154×791 140 KB

Pase the code in here:

image
image1157×794 213 KB 

.fixed
    {
        position: fixed;
    }
3 Likes
5

Hi Hrishikesh,
I did the steps like you posted but I probably made a mistake because it does not work in my test document.
Attached are a few screenshot of what I did and from the result in Chrome.

Schermafbeelding 2020-03-30 om 18.35.56
Schermafbeelding 2020-03-30 om 18.35.563360×2100 1.06 MB

Schermafbeelding 2020-03-30 om 18.36.15
Schermafbeelding 2020-03-30 om 18.36.153360×2100 1.01 MB

Schermafbeelding 2020-03-30 om 18.36.38
Schermafbeelding 2020-03-30 om 18.36.383360×2100 876 KB

6

Ahh, my bad. I considered you might have a <style> tag already setup as that’s just my workflow.

Nevermind, your code should be:

<style>
.fixed
    {
        position: fixed !important;
    }
</style>

I also added the !important, so that this style is not overridden by Hype.

3 Likes
7

Hi Hrishikesh,
You are the hero of the day. It works just fine.
Thanks a lot!

3 Likes
8

High Hrishikesh,
I try to do the same with several elements on a page. But that does not work. Do I have to put the ID name in the script like change the .fixed into .name of the ID? I tried that but that did not work.

.fixed { position: fixed !important; }
9

Sorry, I not ID name but class name.

10

And sorry again. I allready fixed it myself. The element was part of a group. That was the reason it did not work.

11

Great that you fixed it yourself. However, for future reference, to select multiple elements in CSS and apply the same property to them, you can either:

  1. Give the same class name to all those elements. You can give multiple class names to an element by seperating them with a space. For example, class1 class2. This element will inherit CSS from both of those selectors. But, in this case, please note, that, the CSS property that loads later will take preference. For example, if you load position: fixed; in a line above that position: absolute; to the same element, the element’s position will be absolute.

  2. Give different class name, but, use the same CSS style. You can give a different class name to a different element, but, if you want to apply same styles to both these classes, you can just add multiple selectors and seperate them with a space. For example, .class1 .class2 {position: fixed; !important}. You can also use an ID selection along with a class selector. An ID selector is used as #id1 {position: fixed; !important}. However, please note, you can just use a unique ID in an entire Hype document and even then if you do use same ID to multiple elements, only the first one works fine.

3 Likes
13

Hi Hrishikesh,
Thanks for your reply. I’am going in to it and try to apply it in hype.
Have a nice weekend!

1 Like