View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 1805 | Composr | core_menus | public | 2015-02-14 04:05 | 2015-02-14 14:08 |
| Reporter | Rishi Saravanan | Assigned To | Chris Graham | ||
| Priority | normal | Severity | feature | ||
| Status | resolved | Resolution | fixed | ||
| Summary | 1805: How to make a navigation menu float while scrolling | ||||
| 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. | ||||
| Tags | No tags attached. | ||||
| Attach Tags | |||||
| Time estimation (hours) | |||||
| Sponsorship open | |||||
|
|
This is eventually coming to browsers in a clean way: 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. |
|
|
Really pleased with this. I used the stuck_nav CSS class that our JavaScript handles. It was designed for the panel menus, but worked with the top ones with some tweaks. 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} {$REQUIRE_JAVASCRIPT,javascript_menu_popup} </nav> {+END} and had to add a higher z-index into the JavaScript. |
|
|
wow, wonderful, thanks so much! Very pleased indeed. |
