#1805 - How to make a navigation menu float while scrolling
-
By Rishi Saravanan
- Added
- 3 views
| Identifier | #1805 |
|---|---|
| Issue type | Feature request or suggestion |
| Title | How to make a navigation menu float while scrolling |
| Status | Completed |
| Handling member | Chris Graham |
| Addon | core_menus |
| Description | Hello, I'd like to learn how to make my top horizontal main navigation menu bar float so that it always stays at the top of the window while scrolling down.
I started to take a look at the following instructions, but wasn't sure which templates should get which parts of the code. http://www.dwuser.com/education/content/creating-a-floating-navigation-menu/ I'm putting this in the tracker system instead of forum, in case it needs to be a sponsored item. |
| Steps to reproduce | |
| Funded? | No |
The system will post a comment when this issue is modified (e.g., status changes). To be notified of this, click "Enable comment notifications".
Comments
http://caniuse.com/#feat=css-sticky
It is not yet finalised, it'll be in the next version of one of the CSS specifications:
http://dev.w3.org/csswg/css-position-3/
However of course we don't need this to implement this. I'll give it a little thought.
Added class, moved overflow to inner element instead:
{+START,IF_NON_EMPTY,{CONTENT}}
<nav class="menu_type__dropdown stuck_nav" role="navigation" style="overflow: visible">
<ul onmouseout="return deset_active_menu()" class="nl" id="r_{MENU|*}_d" style="overflow: hidden">
{CONTENT}
</ul>
{$REQUIRE_JAVASCRIPT,javascript_menu_popup}
</nav>
{+END}
and had to add a higher z-index into the JavaScript.