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
Related
I cannot make work a semanticui sticky menu when I set a visible sidebar. There is a JSFiddle explaining the issue. The top menu glitches and does not seem to follow the scroll.
<div class="example">
<div class="ui visible inverted left vertical sidebar menu" id="left-menu">
<a class="item">Option 1</a>
</div>
<div class="pusher">
<div class="ui sticky menu" id="top-menu">
<a class="item">Menu</a>
</div>
<div style="height:3000px; background-color:red;">
Example with ui sticky menu
</div>
</div>
</div>
<script>$(function(){ $('#top-menu').sticky(); });</script>
Do you know how to fix this?
I prepared a DEMO to show you some interesting thing. This demo contains basic blueimp gallery setup example, nav bar and button.
<div class="nav">nav</div>
<div class="wrapper">
<div id="links">
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" class="image" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" class="image" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" class="image" alt="Orange">
</a>
</div>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
<button type="button" class="button">Click Me</button>
When user click image, it opens and occupies the full screen, but if.wrapper has a relative position, image won't be occupies full screen, because nav bar will overlap the image.
Try it yourself.
Open demo.
Click image.
Close image.
Click button.
Click image.
After that you will see, nav bar will overlap the image.
How to fix that problem?
When You are making div relative, You are also adding z-index: 1 to it - and You navbar has z-index: 10 already, so that's the main cause of such behavior.
Try adding z-index greater than 10 to relative div in Your stylesheet:
&_relative {
position: relative;
z-index: 11;
}
I am using a free html5 theme to build on for a website and need a bit of help with the Navbar Hover function. To view the original html5 theme go to" http://www.templatemo.com/free-website-templates/430-robotic
The theme is a onepage theme however I am converting into a multipage theme. Originally in the theme you would click a menu item and it would scroll down the page to that content but I want it to open the new page in same window for that content. The way a normal site would do so. Below is a HTML and CSS.
HMTL
<div class="templatemo_menu">
<div class="templatemo_socialmedia">
<div class="templatemo_social">
<a href="http://www.Facebook.com/GreenHouseEffectUSA">
<img src="images/facebook.png" alt="templatemo facebook">
</a>
</div>
<div class="templatemo_social">
<a href="https://twitter.com/greenhouse_usa">
<img src="images/twitter.png" alt="templatemo twitter">
</a>
</div>
<div class="templatemo_social">
<a href="#">
<img src="images/youtube.png" alt="templatemo youtube">
</a>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-menu">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" wp-nav-menu="Primary" wp-nav-menu-type="bootstrap">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DONATE
</li>
<li>
VOLUNTEER
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Try moving the classes to the div rather than the ul
So, I'm developing a app for Windows Phone 8.1 and Im having an issue when trying to use scrollable divs (javascript). Using the emulator to test the app, when I scroll down and let go the mouse button, it automatically scrolls back up, making it impossible to click on lower items. Note that Im using overflow:scroll on the div. I also use jquery mobile.
So here is my code:
<div data-dom-cache="false" data-role="page" id="index">
<div data-role="header" data-theme="b">
<h1 style="padding-top:0.2em;padding-bottom:0;border:0"><img alt="ss" src="img/logoHeader.jpg" /></h1>
</div>
<div data-role="content" id="wrapper" style="padding:0.5em; overflow:scroll;" >
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="c">
<a href="#USA" data-transition="slide">
<img src="img/usa.jpg">
<h2>USA</h2>
</a>
</li>
<li data-theme="c">
<a href="#England" data-transition="slide">
<img src="img/england.jpg">
<h2>England</h2>
</a>
</li>
<li data-theme="c">
<a href="#France" data-transition="slide">
<img src="img/france.jpg">
<h2>France</h2>
</a>
</li>
<li data-theme="c">
<a href="#Mexico" data-transition="slide">
<img src="img/mexico.jpg">
<h2>Mexico</h2>
</a>
</li>
I have a few more items listed, so the list is long enough for the user have to scroll down. But when I scroll down, it automatically scrolls back up. I can't even reach the lower items. Any ideas how to fix this?
I would like to implement links in nested submenus but it doesn't seem willing to work.
<div class="ui menu">
<div class="menu">
<div class="ui pointing dropdown link item">
<i class="dropdown icon"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Sub Menu</span>
<div class="menu">
<div class="header">Links</div>
<div class="item">Google</div>
<div class="item">StackOverflow</div>
</div>
</div>
</div>
</div>
</div>
</div>
The links in the submenu will not work (though links in the menu will).
Is this a bug or a "normal" feature. Has anyone find a way around this ?
Thanks a lot.
You don't need the div in the leaf menu item - try this under the links sub menu
<a class="item" href="http://www.google.com">Google</a>