Ambiera ForumDiscussions, Help and Support. |
|
|
|||||
|
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. |
||||
|
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. |
||||
|
Great Erik! Thank you! ;) |
||||
|
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. |
||||
|
|
||||
|
Put the menu into a container. For the container, enter that code in the "Additional CSS code". then it works. |
||||
|
Thanks, now ist works. |
||||
|
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... |
||||
|
Do it like described above, that will work. |
||||
|
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/ |
||||
|
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/... |
||||
|
Thx for help. But it's more difficult than it could be. May be I'll try to do it later. 
|
||||
|
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. |
||||
|
Doing this for another client, I realised that I was too complicated the first time around and this effect can be accomplished by simply pasting: position: -webkit-sticky !important; position: sticky !important; z-index: 3000 !important; top: 0; Into the CSS of the menu. You don't need to define a whole class for it. You still DO need to make sure the menu is NOT inside another container, so I basically have a stack of three containers on my website - one header with the title and logo, then the menu, then the content. Cheers! |
||||
|
|
){kind=link}