Nav vs. Div in the Skin Stylesheet

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
lcarver
Propeller Head
Posts: 17
Joined: Mon May 21, 2018 8:20 am

Nav vs. Div in the Skin Stylesheet

Post by lcarver »

The latest Flare update changed some things on the back end that had the side effect of screwing up a bunch of my skin styling. I use a post-build command to import my own skin stylesheet. I have fixed most of the problems, but my side navigation pane still has a problem with scrolling out of sight when the page is scrolled.

Tech support helped me track the remaining problem to a change implemented on the Flare end (this occurs during building and I was told there is no way to override it):

Code: Select all

<div class="main-section">
<div class="row outer-row sidenav-layout">
                            <nav class="sidenav-wrapper">
                                <div class="sidenav-container">
...
</div>
</nav>
</div>
</div>
The sidenav-wrapper <nav> class used to be a <div> class!

I have not been able to find anything useful online about why navs behave differently than divs, but for some reason this has really messed up my navigation pane.

Fixes that haven't worked:
- If I use position: fixed in the .sidenav-wrapper class in my skin stylesheet, I lose the ability to scroll in the nav pane and the bottom content gets hidden.
- Someone at tech support suggested adding the property "height: 90%;" and for some reason this does fix the scrolling issue, but it messes up the scaling and if someone zooms the browser in to 125-150%, the bottom content still gets hidden.

Halp? :)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Nav vs. Div in the Skin Stylesheet

Post by NorthEast »

lcarver wrote:but my side navigation pane still has a problem with scrolling out of sight when the page is scrolled.
What's the problem that you're trying to fix?

By default, the side navigation pane will scroll separately to the topic body.
lcarver
Propeller Head
Posts: 17
Joined: Mon May 21, 2018 8:20 am

Re: Nav vs. Div in the Skin Stylesheet

Post by lcarver »

Hi Dave,

Thanks for your response! :) It used to work for me - but since the <div> was replaced with a <nav> on the back end in Flare, it no longer scrolls separately from the page by default (with my imported skin stylesheet). The navigation pane scrolls right out of sight when you scroll the page.

The fix they gave me to fix the problem was to change the height of sidenav-wrapper to 90%. But that causes this problem - the bottom of the navigation pane content begins to get lost off the bottom edge of the browser; it won't scroll further.
scrollproblem.png
Another problem is that a blank space for the side nav pane is now showing up on my homepage (see below), even though I have the master page set with

Code: Select all

.sidenav-wrapper{
				display:none;
			}
sidenav-home.png
I am puzzling over why <div> and <nav> behave so differently; I think I will have to revert to a previous version of Flare if I can't figure this out, but I don't want to be stuck with that version forever.

Lexi
You do not have the required permissions to view the files attached to this post.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Nav vs. Div in the Skin Stylesheet

Post by Psider »

It's likely that some other style you have defined is interferring with the new nav code.

If you can't see what's causing it using the developer tools, you could try making a copy of your imported stylesheet, remove all the styles and add them back in one by one until you find the one causing the issue.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Nav vs. Div in the Skin Stylesheet

Post by NorthEast »

lcarver wrote:it no longer scrolls separately from the page by default (with my imported skin stylesheet). The navigation pane scrolls right out of sight when you scroll the page.

Yep, but by default the navigation page and topic will scroll separately.

So I'd guess that it's something in your skin stylesheet that is causing the problem.
lcarver
Propeller Head
Posts: 17
Joined: Mon May 21, 2018 8:20 am

Re: Nav vs. Div in the Skin Stylesheet

Post by lcarver »

Hmm, OK, I will try stripping everything out and adding them back into my stylesheet one by one. Thanks!
Post Reply