It seems like no matter what I try, the Facebook page plugin always goes on top of my fixed position top nav bar. I have used every combo I can think of. I have set the Nav bar to a very high z-index (99,999 or higher) while setting the z-index of the plugin container very low. But it still goes over the nav bar when scrolling down.
Here is an example page so you can see what I mean, the Facebook plugin is in the right column.
http://www.tinker-mods.com/gallery/xbox-360/custom-made-xbox-360-console.php
Instead of setting z-index to iframe set z-index: 0 to .fb-page div itself and set higher z-index to #myTopnav.
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
I am attempting to hold my footer div at the bottom of the site to avoid blank space underneath it on shorter pages. When I set the position of the footer to be absolute, the responsive menu button seems to take its position relative to the footer and no longer to the header. When I change it back from absolute it works normally. It is almost as if it is associating itself with the footer menu rather than the header menu, but I can see no good reason why this would happen. Also, when I am logged in to WordPress, the top menu bar (on the front end) gets pushed down in just the same way. However, this doesn't happen until the viewport hits 600px (I have no media queries at 600px). The responsive menu already appears at a viewport width of 767px.
This is a WordPress website in progress here.
I am using a custom theme and this responsive menu
Does anyone have any idea what might be going on there? Thanks.
You would need to move the #click-menu div & the #responsive-menu div outside of the footer element in order to fix this.
Here's a similar issue w/ some great answers: Absolute positioning inside absolute position
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">
When i scroll my site all content goes well below under top fixed menu, but only left side bar gets overlapped with it.Can anyone tell where i am doing wrong????? This is my site . http://www.techonicals.com
Add a z-index to your menu and this will fix your problem:
.menu {z-index:10000;}
in css file set .menu {z-index:1} or more than 1 :ะพ)
you must use z-index whit a hight value
checkout this site
http://www.w3schools.com/cssref/pr_pos_z-index.asp
you can check the max value and what happen when is exceeded here
http://www.puidokas.com/max-z-index/
My site uses wordpress. I have a right header as seen here http://www.gigster.me and a top centered drop down menu as a plugin for buddypress links. This renders the links on the top right un-clickable. I tried changing the z-index properties of the center tab but it's still not working. The drop down menu is causing the usable area to the right and left of the actual tab/menu to be visible but unusable.
I'm not a coder so i appreciate any help for amateurs like me.
thank you
Ziad
A few options:
Set the login section to display: relative; and that would push the rest of the page down.
Decrease it's z-index and when it loads, set display: none; for .header_right
Decrease the login screen's z-index, but increase it when it's dropped down.