We Keep Coding

Fix relative position after absolute container

I have a mega menu with position absolute and after the mega menu, I have a relative container like this:
<nav class="mega-menu relative">
<div class="logo-wrapper">
<img src="./logo.png" alt="">
</div>
<ul class="nav-items">
<li><a data-menu="#mega-1" href=""> Men fashion </a></li>
</ul>
<div id="mega-1" class="mega-item absolute">
</div>
</nav>
<div class="owl-slider owl-theme home-slider relative">
</div>
When I hover on the mega menu it's getting behind the container.
I have tried many solutions from StackOverflow but it does not work for me.
see the image

Align icons at left and Right corner of navbar of jQuery Mobile

I'm using below code to add nav bar to my mobile website. Here I have two icon on the left side of nav bar. But I want to position the Next icon to the Right Side such that Two icon will be on corner of left and Right Side.
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page">
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#one" data-icon="arrow-l" >Previous</a></li>
<li><a href="#two" data-icon="arrow-r" >Next</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
Here is the picture, I'd like to get the output
For some Reason the code is not working , So here is the link for my demo snippet
Demo Snippets

You have to add some css fo this
.ui-block-b a .ui-btn-inner .ui-icon{
left: auto;
right: 5px;
}
Updated Codepen

Dropdown is hidden when used with malihu scrollbar

I'm using The malihu scrollbar in combination with a semantic ui dropdown. I expected the dropdown to overflow the scrollbar so all content would be shown. Instead it hides the dropdown under the scrollbar so the items are invisible.
The html that I use for the dropdown is from Semantic UI:
<div class="ui compact menu">
<div class="ui simple dropdown item">
Dropdown
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
</div>
</div>

JS: Script for sticky navbar not running

For some reason on my webpage, the javascript for a sticky navbar isn't running at all. Here is the jsfiddle. The navbar (in bright orange) runs across the top of the page - at the base of header. The script is set to make the navbar visible after the user scrolls past a point and then past a further point, it is meant to make it fixed to the top of the viewport with the help of .offset().top;.
I've tried out the exact same script in a similar implementation and it works. Would appreciate anyone's help pointing out the glitch.

the problem is the z-index in your html Layout
<header>
<div class="mainheader">
<img class="logo" src="images/logoinner.png">
<img class="detail1" src="images/detail1.png">
</div>
<div class="subheader"></div>
<div id="menu-wrapper">
<nav id="menu">
<div class="menu">
<ul class="menu">
<li>
<img class="logoflag" src="images/logoflag.png">
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="contentwrap">
.....
</div>
You only set the z-index of the menu wrapper div but the z-index of the header was still smaller than the z-index of your div class="contentwrap". So just increase the z-index of the header and it should work.
here is a fixed fiddle:
https://jsfiddle.net/uh6e88n3/6/

Multiple sticky footers

Is there a solution to have multiple sticky footers, one per section/div ?
Assume the following example:
<nav id="stickyHeaderMenu">
<!-- link_to section#one -->
<!-- link_to section#two -->
<!-- link_to section#three -->
</nav>
<section id="one">
<div class="content"> </div>
<nav id="footerNavOne"> </nav>
</section>
<section id="two">
<div class="content"> </div>
<nav id="footerNavTwo"> </nav>
</section>
<section id="three">
<div class="content"> </div>
<nav id="footerNavThree"> </nav>
</section>
The idea is to have one sticky header menu, and one sticky menu for the section in view at bottom of page. User scrolling down causes footer to change, depending on the section in view.
Note that sections are really tall, and take some scrolling to see all of it.
So when viewing section#one, nav#footerNavOne is the sticky footer. Once user reaches end of section#one, nav#footerNavOne sticks to it and goes up and out of page with it. Now section#two comes up, and nav#footerNavTwo becomes the new sticky footer.
update: I found the following, which looks pretty efficient: sticky-kit.js.
It sticks a div to the top of its parent. see this jsfiddle, showing it done on above example.
Is it possible to do the opposite: (stick the div to the bottom of parent) ?