Ambiera Forum

Discussions, Help and Support.

Create a new account, Search, or Login:
Name: Password:
Ambiera Forum > RocketCake
Fixed / Sticky Header
Author Text

mitchelt
Registered User
Quote
2018-10-16 23:48:11

Is there a way to always show the header even when scrolling down the page?

I do not have any navigation in the header area, just a logo and contact info.


erik
Registered User
Quote
2018-10-17 08:39:14

You can do this to any element, like the container your header is in. Do it like this: Select the element, right-click it, choose "HTML Code..." -> "Additional CSS styles" and enter:

position: fixed; z-index: 3000;


You won't see the change in the editor, but when you click 'preview' then you can see that it works.


misterpaint
Registered User
Quote
2018-10-17 18:54:52

Great Erik! Thank you! ;)


wolfgang
Registered User
Quote
2018-11-02 17:24:41

I need help please.
Additional CSS code does not work. It should be the picture or a menu fixed above. You picture.

Thanks for your help.







wolfgang
Registered User
Quote
2018-11-02 17:26:04




erik
Registered User
Quote
2018-11-03 14:59:47

Put the menu into a container. For the container, enter that code in the "Additional CSS code". then it works.


wolfgang
Registered User
Quote
2018-11-08 18:58:41

Thanks, now ist works.


ele-ele
Registered User
Quote
2018-11-19 09:34:50

Hello guys! Any way to fix only menu on top (after scrolling to top) ? I don't know how to explane. May be some images will help...




niko
Moderator
Quote
2018-11-19 13:30:14

Do it like described above, that will work.


ele-ele
Registered User
Quote
2018-11-19 14:06:50

wrote:
Do it like described above, that will work.

This does not work correctly. The menu remains in the same place. But I need it to shift to the top while scrolling down, and hanging there. The upper part of the site (located above the menu: logo, contacts, picture, etc.) when scrolling down should disappear and the menu remain.

An example of such a menu: https://realt.by/sale/flats/


niko
Moderator
Quote
2018-11-20 11:20:16

Ah, that is a bit more complicated to do. You need a bit of javascript AND css to do this. See how to do this here:
https://www.w3schools.com/howto/...


ele-ele
Registered User
Quote
2018-11-20 14:40:25

Thx for help. But it's more difficult than it could be. May be I'll try to do it later.


ivarforkbeard
Registered User
Quote
2021-03-21 17:21:15

Hey, after three days, I figured out a reasonably easy way to do these sticky menus. My version matches the request in this thread that the navigation menu begins under the header, and scrolls up with it, and then stops when it reaches the top of the page and is fixed there until the user scrolls back to see the header re-appear. If I can be so bold as to think I have something valuable to offer, let me explain how I accomplished this for my navigation menu.

First, I edited the HTML of the navigation menu. I added the additional attribute of:


class = "sticky"


Then in the main html of my masterpage.html, I also added in the additional CSS of:


div.sticky {
position: -webkit-sticky !important;
position: sticky !important;
z-index: 3000 !important;
top: 0;
}


That's really all you need to add in the way of custom code to get this to work!


Now, the caveats (aren't there ALWAY caveats?)

The navigation menu CANNOT be inside any other container. It seems like it will inherit the CSS positioning of the other container. I have had no luck defining the container as sticky and hoping the menu inside it would stay with the container, or even creating a second div.sticky2 with a higher z-index. Perhaps someone much wiser than myself in the ways of CSS could shed some light on this?

So anyway, my policy of keeping my whole page inside a container right at the start had to change.

Now the header is inside a container, then the navigation menu directly on the masterpage, and then a content container, and finally my footer container.

The knock-on effect of this for me personally is that it wrecks my intention to have a navigation menu that is centred on the page. I'm still studying this. As I've said elsewhere, the navigation menu seems to ALWAYS left justify, and now that I cannot put it into another container and centre that, I'm a bit stumped.

Peace out.


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Interna?ional" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© 2020 Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact