Dropdown menu hides behind images - javascript

The dropdown menu of my blog gets behind the image slider on the main page.
http://allfacebookgames.blogspot.com/
How do I avoid it so the the dropdown menu is not covered?
For your information, the dropdown menu does not require any javascript and solely depends upon css.
Thank you.

This will fix it:
#menu-wrapper {
position: relative;
z-index: 40;
}
To show that it works: http://www.csspivot.com/t0Sj3

Set position:relative and z-index:9999 on the #menu-wrapper rule

Related

fullpage.js issue positioning navigation button

I am currently using the fullpage.js plugin for my website, I created a slide in navigation bar and I am now placing the pancake to open it on the first section of fullpage. I am trying to position it in the top left corner of the page, but I can't figure out how. Here is the code. Thanks in advance for your help.
<div class="section"><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span><h2 class="animated fadeInDown">GTX 1080</h2></div>
edit: here is all of my code: https://anotepad.com/notes/pjccfy
Image
You give me very little code to go by, but I'm assuming you want a similar navigation as on the fullPage.js demo page.
Using CSS:
.section {
position: fixed;
top: 0;
left: 0;
}
As I said, I have very little to go by so I don't even know if .section is the correct class to apply this positioning to. Would be great if you could provide a complete page. If you want the element to have some spacing between the browser borders, you can increase the values for top and left to say, 20px.

Delay in bootstrap toggle menu

I have built a menu bar using bootstrap. In the responsive mode, when the toggle menu is activated, the menu list items comes up quickly while the background container comes with a delay. Similarly when the toggle mode is deactivated, the container disappears while the menu items disappear with a delay. I have uploaded a video of this issue here: Video
Kindly, please let me know how to solve this problem.
It is because your #custom-collapse in the main navigation section of your css has the overflow set to visible remove that and it should work fine.
#custom-collapse {
border: none;
box-shadow: none;
}
If you put the overflow to visible to remove the scrollbar you should maybe try
.navbar-collapse.in {
overflow-y: visible;
}

Affix Bootstrap falling onTop of Sub Navigation instead of above, Bootstrap

I cannot share the link to the webpage at the moment for confidental reasons but I will describe my issue as much as possible with the required code.
I am running the affix javscript from Bootstrap 3.3.6 and have built the page on anchor points so that the the menu stays affix right above a sub navigation.
My order of elements are:
[MAIN]
[HEADER]
[CAROUSEL]
[NAV]
[ABOUTBOX]
[CONTAINER/ROW]
[SUBNAV]
[LIBRARYBOX]
[CONTAINER/ROW2]
[SUBNAV2]
[CONTACTBOX]
[CONTAINER/ROW3]
[SUBNAV3]
[FOOTER]
[/MAIN]
The Affix JS I am using
//AffixJS
var tfv=$('#carousel-nmhead').offset().top+$('#carousel-nmhead').height();
$('#navbar-main').affix({
offset: {
top: tfv,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true));
}
}
});
CSS
.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.affix-top {
position: static;
}
.affix-bottom {
position: absolute;
}
The Issue
Essentially the nav drops correctly right above my sub navigation as planned once the "affix" class is set
The moment it is still on "affix-top" then on the first click/interaction with the menu - the nav overlaps the sub navigation and it is only on the subsequent click that the nav will reposition itself anew
Attempted solutions
Add
negative margins/paddings,
create new anchor divs within the main 3 content divs
tried debugging this different or fixed heights on the containers instead of min-height 0 !important;
other minute misc. troubleshooting
gone through google dev tools to inspect and play around with the JS HTML and CSS but no luck
I am the only one working on CSS/JS at the firm and the only colleague with similar exp cannot comprehend why the Affix is not working on the first click/interaction with the nav but only on the subsequent ones
If you click on ABOUT (nav has About/Library/Contact as links) the page bounces down to About and if you click ABOUT a second time it scrolls up and since that is when the affix commences, the sub navigations suddenly pops out underneath.
Afterwards with the "affix" class set if you click on LIBRARY or CONTACT then you correctly bounce between them showing the sub navigation each time.
However if you click on ABOUT anew then the state goes back to the top of the page and you have click on the button twice again so that the sub navi pops out underneath
If this can't be trouble shooted without code I'll try to make a blank page so that we can clearly see the impact
Thanks a lot!
I had a similar issue with an affix not updating until I clicked somewhere in the body. I fixed it by adding $(element).affix('checkPosition')

How to create a vertical off-canvas drop down menu in Foundation?

Currently Foundation allows you create off-canvas menus that slide in horizontally from the left or the right. I'd love to know how to create one that could slide vertically from top to bottom: moving the wrapped content downwards.
I understand that there are already independent javascript/ajax solutions for this. The answer I'm really looking for is to adhere to the existing foundation code as much as possible; using the relevant right/left menu code as a template.
Thanks in advance :).
I realise this is an old question and I'm unsure if you're still hung-up on this but for the sake of future reference here is a very simple css solution.
Following the offcanvas example on the Foundation website we can replace the class 'position-left' with 'position-top' and add 'data-position="top"' as below.
<div class="off-canvas position-top" id="offCanvas" data-off-canvas data-position="top">
In your CSS add the class 'is-open-top' which will open the menu vertically.
.is-open-top
{
-webkit-transform: translateY(250px);
-ms-transform: translateY(250px);
transform: translateY(250px);
}
then we need to re-position the menu items with the following class
.off-canvas.position-top
{
left: 0px;
top: -250px;
width: 100%;
}
and finally remove the scroll bar
.off-canvas-wrapper
{
overflow: hidden;
}
Working example http://codepen.io/rawiki/pen/eZamZL
As the menu opens it will push your body content downwards. Note that it will not automatically resize as you add menu items so you will need to increase or decrease the 'translateY' distance as well as setting 'top' to the negative of the same value.

Sticky Menu - Hides on some pages but not others

The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
Your support is greatly appreciated :)
Try removing overflow hidden from this element:
.header-container {
/* overflow: hidden; */
}
Just remove the line, or you can replace it with overflow:initial or overflow:auto;

Categories