Menu bar under google map - javascript

I've got a problem with the google map, basically on the top of my website I've got a menu, which is always on the top, even if you scroll page down.
The CSS for the menu:
#MyMenu{
width: 100%;
height: 105px;
position: fixed;
}
I got my Google map script from here.
And the problem is, when I scroll my page down to see Google map script, the menu hides under my Google map.
Is there is any way to make my menu always above all div and script? Because right now it goes under my Google map.

Try adding a high z-index value on your menu.
z-index:1000
It would need to be higher than the section containing the map. You may also need to define position:relative and a z-index on the menu's parent, if this seems to have no effect. You can test this out easily with FireBug or Chrome Developer tools.

Assuming your map is wrapped in a specific element on your page, for instance:
<div id="gmap"></div>
You can use CSS to give it a z-index:
#gmap {
z-index: 100;
position: relative;
}
And give a higher z-index to #MyMenu:
#MyMenu {
z-index: 110;
width: 100%;
height: 105px;
position: fixed;
}

Related

Prevent fixed sidebar menu to scroll over footer

Hi is there a simple way to prevent a fixed sidebar som scrolling over a footer or a specific element? I've tried changing it from fixed to absolute depending on different viewport height but my application is nested in a lot of position relative elements so I haven't managed to get it to work yet.
Here is a code example: https://codesandbox.io/s/fixed-sidebar-7gvpf?file=/src/index.js
Ask if I need to clarify anything.
Thanks beforehand,
Erik
Because the element is fixed and therefore outside the normal page flow you can z-index to specify if an element is above or below another.
In your case you can use it like this with z-index: -1; so it wil be positioned behind the element.
const SideBar = styled("div")`
background-color: green;
height: calc(100vh);
width: 50px;
position: fixed;
z-index: -1;
`;
If this causes the sidebar to disappear behind everything you also can set the z-index on the footer with position: relative; to get it to work. like the following CSS:
const Footer = styled("div")`
background-color: blue;
height: 200px;
position: relative;
z-index: 1;
`;
Here is an MDN article on z-indexes if you want to know more
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

Absolute and Fixed Positioning bug on Firefox?

What should be a super simple one here, but its getting me to scratch my head. I have a div with an H1 and P tag that is overlaid on top of a Three.JS 360° video viewer on this website: http://gloriouslabs.com/#page-5
Right now the code for that div is:
.video_tag {
position: absolute;
z-index: 100;
top: 15%;
left: 5%;
width: 230px;}
Works fantastically on Chrome with the position tag rendering it in reference to the top of the screen. However on Firefox, the div renders itself from the top of the PAGE, not the SCREEN (on Firefox you can see the .video_tag div appear on the top of the screen at http://gloriouslabs.com/)
Any ideas why it's acting like that? The same bug happens on both absolute and fixed position.
Cheers!
I opened your page in firefox's inspect and added this position: relative;:
#holder {
height: 100%;
width: 100%;
position: relative;
}
It is working, but I didnt test back in chrome
Set your container to relative positioning
#holder {
position: relative;
}
If this is not the right container then set it on the one you need

sticky menu gets stuck with google map

i have a sticky menu that remains on the top of the screen when scrolled down to 100px, however on a page that i have a googlemap the sticky menu gets weird and stays on a input search form.. i have tried disabling js file that is integrated with the map however it didn't help, on other pages without the map the sticky menu works fine and with firefox even on the page where i have the map the sticky menu works fine too.. right now im on the verge of losing my mind what is wrong with chrome..
here's the page i'm having problem with
http://www.chemtools.com.au/find/
you'll have to scroll down and scroll back to the top to get the issue, on firefox it the issue doesn't shows up so my suspect is chrome itself..
any advise where i should look into or what could be causing the issue?
here is the js the is running the sticky menu`function sticky_menu() {
jQuery('.header').affix({
offset: { top: jQuery('.sticky_menu').offset().top}
});
jQuery('.header-middle').affix({
offset: { top: jQuery('.sticky_menu').offset().top+100}
});
jQuery('#logo').affix({
offset: { top: jQuery('.sticky_menu').offset().top+100}
});
I think you are over complicating your problem by using jQuery. You can easily stick it to the top of the screen using CSS.
If you wrap your header, logo, and and .header-middle objects in a div such as
<div id='wrapper'>
<!-- Your floating header goes here -->
</div>
Then set the wrapper's style/CSS to have position: fixed; ex:
#wrapper{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}
CSS's position: fixed attribute forced the object's location to be fixed to a set location on the screen, which will follow with the screen as the user scrolls.
i sorted it out,, it is cause by -webkit-transform: translateZ(0px);
i just set -webkit-transform: none; to only be applied on chrome and safari browser and the sticking issue with the map is gone..
thanks for the time #Aeolingamenfel looking into the problem,, i really appreciate it

Make a div stick to the left when scrolling

So I am trying to create a left-sided nav bar, but after scrolling I can't get it to correctly stay to the left.
I have tried using:
position: fixed;
and
position: absolute;
However it cuts the width of the DIV down completely.
To get a view of what I'm working with go to: http://198.50.242.77/YouBB/
I'd prefer to use strictly CSS only but if I must use JS I'll use it.
Thanks!
position: fixed is what you want. This causes the element to be removed from the flow entirely and stay in the same position even after scrolling the page.
position: absolute is similar, but it only removes an element from the flow. Scrolling a containing div (or in this case, the whole page) will still cause it to move.
I opened up your web page in Chrome, and changed the styles for #navigation to:
background: white;
height: 100%;
text-align: center;
position: fixed;
width: 18.72%;
This does what you want. You will just need to position the rest of the content to the right.

position fixed on bootstrap 'affix' not working

I added this plugin to this website. The issue that i am having that i cant have the navigation stay fixed on the website for some reason, you can see the little navigation when you scroll down but it does not stay fixed like in the plug in.
does anyone have a way i could resolve this, thank you very much!
Here is the class
#dot-nav{
right: 10px;
top: 50%;
margin-top: -50px;
height: 100px;
z-index: 999;
}
Your nav is positioned fixed to the most nearest relative position item, that is the div with class page-wrapper is 3673 pixels height so the position top:50% is actually doing it well to the middle of that div.
The easiest solution for your problem is to take the whole #dot-nav item outside the page-wrapper and it will work well. Put it after the page-wrapper.

Categories

Resources