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.
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?
Is there a way to set a menu in a Wordpress DIVI site as static?
#main-header {
position: fixed !important;
}
For instance, like this.
The menu stays on the top and as you scroll down, you no longer see it. So it does not go as a sticky menu. Please share your thoughts!
Cheers,
Just a regular dude
For the Divi theme, the easiest solution is to just set it in the themes settings. Divi -> General -> Fixed Navigation bar, and then turn it off. Look at the attached screenshot: https://www.screencast.com/t/VZyvBc3Am
BTW, putting the position to fixed will make the menu always stay in the same position in your browser, so it will do the exact opposite of what you want. Let me know if this helped
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.
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
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/