navbar disappears in second section. tried everything but does not work. I am not into coding btw. just complying to a subject requirement here is the file to get a better look
tried everything I understand at my level. it is driving me crazy.
In your style.css make these changes:
.navbar {
z-index: 10;
}
#about{
z-index: 5;
}
What does that mean?
The value of z-index is more in navbar than in about section. More z-index value will give it more priority and it will be positioned on the top.
Read more about z-index at https://www.w3schools.com/css/css_z-index.asp
the first - you should handle images or gift or video size and convert to for web types because
your web site very big size and delay for loading ,
the second - Adding this might solve your problem
.navbar {
z-index: 9999
}
Related
I can't figure out why the list items on my website are displaying on top of my logo and the menu. Have a look yourself on the website or this image: a screenshot of the https://papojari.codeberg.page/art/ website Some time ago I had the same issue with headings. The headings were in the post-title class because of a template I use. When I removed that class, the problem was gone. My list items don't have a class like that though and I can't find any references to that class and what it does. You can obviously have a look at the CSS on the website but additionally the source code is also here: https://codeberg.org/papojari/pages.
Please tell me how to stop the list items from displaying on top of my logo and the menu.
#papojari, I have checked your site and I think that it's the problem of the z-index between and header and main section.
Here is the adding style for fixing it.
header {
position: relative;
z-index: 99;
}
main {
position: relative;
z-index: 0;
}
I hope it is helpful for you.
Use this code to fix directly
header {
position: relative;
z-index: 99;
}
Reason
You need z-index to control the vertical stacking order of elements. And z-index only affects elements that have a position value other than static (the default).
Take a look of this https://css-tricks.com/almanac/properties/z/z-index/
Today I encountered a weird experience in my site LiveGreen
When I hover on the Menu Services, the dropdown goes underneath the image section below that. I tried every possible way like positioning and z-index ing and all kind, and googled a lot, am not bad with HTML and CSS still, it is testing me.
This theme is purchased, so cant post the code. you can check it from the website itself.
Please Help me.
Remove the z-index property on your .main class.
.main {
z-index: 1; /* this is causing your problems */
}
It's fairly difficult to pull off because there are so few unique classes to key off of. The root cause of the issue for you is that the element with a z-index that is higher than your menu applies that z-index higher up the DOM tree which makes it render on top. The best I could come up with is to apply the following, provided that the #aq-block-8801-5 block is always and will always be the nav menu container.
#aq-block-8801-5 {
position: relative;
z-index: 2;
}
I'm having some issues in trying to fix a site that was built by some one else. Seems the previous developer some how used BootStrap which I'm not an expert. When checking the code I can see that there is a reference for a #footer class, but cannot find the exact problem. The problem is ... there are few Social Media icons, on the regular site they are click-able and working fine, but when you resize the site for responsive the images are there but the links disappear or not working ...
Any idea how to fix this problem ?
The site link is at : http://tie.com.sa/index.html
Thanks in advance ...
Fawaz
You can add some "priority" to the elements using position: relative and z-index.
The description of the footer is overlapping the icons.
Just add the properties and values as shown below into #footer ul:
#footer ul {
position: relative;
z-index: 9999;
}
Listen; I have read and read but couldn't find an answer that fit my problem.
I'm using Fancy Box on my website http://www.houdi.se/video.shtml but have the problem that the Fancy Box appears UNDER the menu when a video-link is clicked (its Responsive).
Viewed in a browser there's no problem since it fill up. BUT when narrowing the browser the menu problem arises. Also viewing the top video in an iPad.
I'm using Adaption-plugin from ProjectSeven for the website. It's a Responsive CSS layout: http://projectseven.com/products/templates/pagepacks/adaptations/index.htm
That plugin also uses Project Seven's Pop Menu Magic 2 for the menu.
I'm not a code wizard but I have tried to increase z-index but it didn't work OR I have not increased the rift one?
Have now spent several hours working with this problem and happy for all help I can get. Just tell me what code you want to see (or have to see).
Remove z-index from this div containing the menu:
<div id="p7PMM_1" class="p7PMMh19" style="position: relative; z-index: 999999;">
The reason that the menu is on top of fancybox is because you're including the script 7PMMscrips.js on the page which manipulates the z-index and position properties of the main menu.
An ease way of solving this would be to just add the following css to your main css file:
#p7PMM_1 {
position: static !important.
}
That would solve the issue but i would not recommend it as using !important is a really bad practice. You can read more about why here: What are the implications of using "!important" in CSS?.
If i where you I would look into removing this script and create the main nav with just pure css instead.
Im no expert but looking at your css file for the navigation bar you don't have any z-index so you could try adding it.
your fancy box css file has several and the lowest is z-index: 8010; so setting you navigation to below that should resolve it.
Try using this code:
.navigation {
background-color: #000000;
background-image: url(images/chameleon.jpg);
background-repeat: no-repeat;
background-position: 0px -60px;
position: relative;
z-index: 90;
}
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.