I'm sitting here scratching my head. There's a problem which in itself is stupid, but I'm unable to fix it! (Yeah you can say I'm stupider than the problem).
Anyway, I have website in which the header menu works on all the pages except on shows pages (there is a group of (Approx 10 pages) which lists different show details).
I have gone through each and every line to detect the problem, but no luck! Even the error console doesn't help me in any way.
Guidance would be appreciated.
Link where the header works :- www.amiteshgrover.com/shows.php
Link where the header doesn't work :- Just go to the shows page (the link mentioned above) and click on any show. Then try to hover on the menu bar, nothing happens? Exactly!
Your #maincanvas is covering the entire header menu.
Change the CSS to:
#mainCanvas {
margin-top:60px;
padding-top:20px;
clear:both;
position:static;
min-width:940px;
z-index:100;
margin-left:125px;
}
The problem is that #main-canvas is in front of your menu, so when you try to click the menu, you're actually clicking #main-canvas.
#main-canvas has z-index: 100 and .nav has no z-index.
To fix it, add position: relative; z-index: 101; to .nav or change your padding-top from #main-canvas to margin-top, this way the #main-canvas won't be at the same position as your menu are.
It seems like sub_styles.css is loaded on all other pages but this one, this style file is what gives the menu it's looks and since it's not loaded on those pages, you see the problematic menu.
Related
I am experiencing weird behaviour with links in WordPress. See attached screenshot. The links in the piece of text are clickable on desktop, but when switching to mobile they can not be clicked anymore.
I inspected the element to check if some z-index or layer is blocking it, but I can't seem to find it. Also the rest of the blocks in the website click fine on mobile.
If you want to try for yourself, website link: https://www.keeperstalent.nl
The part that gives trouble is on the homepage somewhere around the middle.
Any help is appreciated!
You actually have a problem with columns overlap.
All you need to do is to make these two columns to have the same classes:
<div class="wpb_column vc_column_container vc_col-sm-6 vc_col-lg-6 vc_col-md-6 vc_col-xs-12">
Though Andrey's answer will do the trick it may lead to undesirable consequences like this:
Now all links are placed over your header and popups
I was able to fix it by adding:
a {
position: relative;
display: inline-block;
z-index: 2;
}
I'm not sure what was the problem, I just noticed that it works. And it only works with all of the three properties.
I cant really describe the issue that well other than that when I hover the menu appears no problem but when I move the mouse down to select an option it closes again.
In the real version of the site I will be using images instead of the background-colors so it would be great if I could keep the transition without breaking anything.
The code I am currently using for the drop downs is as follows:
#navigation ol#nav-holder li ul.dropdown{
display:none;
}
#navigation ol#nav-holder li:hover ul.dropdown{
display:block;
}
http://jsfiddle.net/c2aah2as/ < To show the issue in more detail.
I have never ran into an issue like this before when creating drop downs so I hope I am just missing something simple!
Hope this is understandable.
Thanks,
Luke.
The problem is caused by <div id="nav-bottom"> which stays on top of the menu and interrupts hovering. Issue can be fixed by raising the z-index of the <li>-element on top of <div id="nav-bottom">.
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;
}
I have this page: http://www.problemio.com which has a black bar on top which has search and a dropdown menu. That looks reasonably ok.
But then I have another page like this: http://www.problemio.com/category.php?category_id=1 which has those two elements, but for some reason, the search appears on the top left of the bar.
How can I make these elements appear as they do on the home page of problemio.com ?
Thanks!
You have it absolutely positioned over your search box. Fix the absolute positioning and you should be fine.
you don't have you main_styles.css on the interior page, which has this style in it:
#search {
float: right;
margin-top: 7px;
width: 14em;
}
In your page which displays the search box as you desire [problemio.com] the div has the css value 'float: right'. This is the value you need on the other page.
div#search {
float: right
}
I just answered this in the comments of your other question, posted 5 min ago.
Your problem is that the home page div with class nav takes values from main_index.css and the other page takes values from main.css.
There are some inconsistencies between the two which might lead to the problem. Firebug or devtools will help you debug these kind of problems.