Topic on Skin talk:Chameleon

Re-enable Sticky Header

9 comments • 23:59, 4 March 2021 3 years ago

9

Summary by DesignerThan

By changing the structure a bit in the Layout-XML File it was possible to get it working. For more information look here.

Z929669 (talkcontribs)

I have modified the sticky header XML. In doing so, I have broken the sticky effect. Can someone point me to the relevant CSS and Js that I need to tweak? Guessing a modification to a negative margin in Js.

15:42, 9 February 2021 3 years ago

DesignerThan (talkcontribs)

Normally it should be possible to enable the sticky effect again in the XML. Is that not possible anymore?

You should be able to do that with the Modification Sticky. For Example like that:

<component type="NavbarHorizontal">

<modification type="Sticky"/>

...

...

...
</component>

15:10, 14 February 2021 3 years ago

Z929669 (talkcontribs)

Yes, that's still there, but it's broken, because I modified the xml to use a custom container above the header bar. Doing so probably requires juxtaposing the sticky js variables somehow or tricking things by using top and margin via css. Just not sure how to make the edits or where.

My altered xml:

<structure xmlns="https://ProfessionalWiki.github.io/chameleon/schema/3.0/layout.rng">

	<grid class="content">
		<grid class="header">
			<cell span="12" class="banner">
				<component type="Container" class="content-container">
					<component type="Logo" class="logo" addLink="yes" />
				</component>
			</cell>
			<cell span="12" class="navbar banner">
				<component type="NavbarHorizontal">
					<modification type="Sticky"/>
					<component type="Html"><![CDATA[<a class="nav-link" href="https://stepmodifications.org/forum" target="_self">Forum</a>]]></component>
					<component type="NavMenu" flatten="no"/>
					<component type="Html"><![CDATA[<a class="nav-link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=N5TLCEMXY7KQU" target="_blank"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif"></a>]]></component>
					<component type="Toolbox" class="dropdown" flatten="no" position="right"/>
					<component type="PageTools" class="flex-row" position="right" hideSelectedNameSpace="yes"/>
					<component type="PersonalTools" position="right"/>
					<component type="SearchBar" class="order-first order-cmln-0" position="right" buttons="go"/>
				</component>
			</cell>
		</grid>

		<grid class="body-content-container">
			<row>
				<cell>
					<component type="SiteNotice"/>
				</cell>
			</row>

			<row>
				<cell>
					<component type="MainContent"/>
				</cell>
			</row>
		</grid>

		<grid class="mb-2 mt-4" mode="fluid">
			<row>
				<cell>
					<component type="NavbarHorizontal" collapsible="no" class="small mb-2" >
						<component type="LangLinks" flatten="no" class="dropup"/>
					</component>
				</cell>
			</row>

			<row>
				<cell>
					<component type="FooterInfo"/>
					<component type="FooterPlaces"/>
				</cell>
				<cell>
					<component type="FooterIcons" class="justify-content-end"/>
				</cell>
			</row>
		</grid>

		<component type="NavbarHorizontal" class="small bg-darker">
			<component type="Menu" message="secondary-menu"/>
		</component>
	</grid>
</structure>

Edited 07:50, 15 February 2021 3 years ago

DesignerThan (talkcontribs)

Okay. Maybe it is possible to add the sticky-Modification to the grid with the class="header". If not, do you have a link to the wiki? Maybe I'll find a solution that way. Also you could have a look at the CSS property position: sticky; that is what most likely is used in that case. --DesignerThan (talk) 20:10, 16 February 2021 (UTC)

Edited 20:10, 16 February 2021 3 years ago

Z929669 (talkcontribs)

Sure, the link is: https://stepmodifications.org I thought the sticky mod could only reside under the navbar component, but I could be wrong. If you can figure it out, I'd be in your debt. ~z929669 Talk 19:34, 24 February 2021 (UTC)

19:34, 24 February 2021 3 years ago

DesignerThan (talkcontribs)

Sadly I can't test it, if it is possible to add the modification to the grid. Just try it in the Layout XML-File, you are always able to revert it ;). But I was able to test which CSS settings would be needed to do it manually. position: sticky; //makes the container sticky top: 0; //set's the position of the navigation at the top z-index: 9999; // if that is not set, the navigation will get hidden behind the content

I hope that will help you.

20:39, 25 February 2021 3 years ago

Z929669 (talkcontribs)

You were right! It does indeed work inside the grid 'header' container . Now I just need to figure out how to apply ONLY to the navbar. On scroll downward, the image/logo should roll up and 'stick' at the top of the navbar. This keeps the nav present without wasting all that space for the header.

Alas, the sticky mod ONLY seems to work in this grid element. You can see the behavior here: https://stepmodifications.org/wikidev

Any other ideas for that (regardless, your thoughts have proven helpful!).

20:32, 26 February 2021 3 years ago

DesignerThan (talkcontribs)

Did you already get it to work? Because as I had a look at the site the logo went up and only the navbar was sticky (visible), seemed very nice. --DesignerThan (talk) 01:24, 1 March 2021 (UTC)

Edited 01:24, 1 March 2021 3 years ago

Z929669 (talkcontribs)

Yep. I figured it out. I had to modify the Chameleon XML such that all header content is now contained in <grid>, and navbar had to be in its own separate grid as such:

<structure xmlns="https://ProfessionalWiki.github.io/chameleon/schema/3.0/layout.rng">

	<grid class="content">
		<grid class="header">
			<grid class="banner">
				<component type="Container" class="content-container">
					<component type="Logo" class="logo" addLink="yes" />
				</component>
			</grid>
		</grid>
		<grid class="navbar banner">
			<modification type="Sticky"/>
			<component type="NavbarHorizontal">
				<component type="Html"><![CDATA[<a class="nav-link" href="https://stepmodifications.org/forum" target="_self">Forum</a>]]></component>
				<component type="NavMenu" flatten="no"/>
				<component type="Html"><![CDATA[<a class="nav-link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=N5TLCEMXY7KQU" target="_blank"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif"></a>]]></component>
				<component type="Toolbox" class="dropdown" flatten="no" position="right"/>
				<component type="PageTools" class="flex-row" position="right" hideSelectedNameSpace="yes"/>
				<component type="PersonalTools" position="right"/>
				<component type="SearchBar" class="order-first order-cmln-0" position="right" buttons="go"/>
			</component>
		</grid>

		<grid class="body-content-container">
			<row>
				<cell>
					<component type="SiteNotice"/>
				</cell>
			</row>

			<row>
				<cell>
					<component type="MainContent"/>
				</cell>
			</row>
		</grid>

		<grid class="mb-2 mt-4" mode="fluid">
			<row>
				<cell>
					<component type="NavbarHorizontal" collapsible="no" class="small mb-2" >
						<component type="LangLinks" flatten="no" class="dropup"/>
					</component>
				</cell>
			</row>

			<row>
				<cell>
					<component type="FooterInfo"/>
					<component type="FooterPlaces"/>
				</cell>
				<cell>
					<component type="FooterIcons" class="justify-content-end"/>
				</cell>
			</row>
		</grid>

		<component type="NavbarHorizontal" class="small bg-darker">
			<component type="Menu" message="secondary-menu"/>
		</component>
	</grid>
</structure>

Thanks for the tips!

19:12, 1 March 2021 3 years ago