I have been trying to make this seriously simple hover for my portfolio website but after testing with every single existing option I do not seem capable of managing to work.
I have read lots of threads about this issue but none seemed to give a proper solution which worked.
Please find below an image of the code I have for my nav bar:
Image
It is really not hard but the hover is stubborn.
I have traded and modified everything and I am now out of hopes.
Can any of you be so kind and see what could be the cause for this?
PS: It is not the final hover form since I was simply testing.
I finally managed to fix the issue!
It was as simple as it looked, basically had a z-index bigger than the nav div and when I changed this it started working.
Thank you all for your time I hope this somehow helps anyone else who's troubled.
Please remove the class animated & zoomIn from it. These class are from animate.css so it might create an issue.
Related
I've been struggling at work to figure this out for a week and can't quite figure it out and none of my friends know HTML/CSS so I thought why not ask here? I work on my company’s internal website, it's kinda crap none of the apps work. They have a carousel that we don't much care for that I'm trying to get rid of so I was going to make a new one... only issue is the site doesn't allow any scripts or java so I'm really just limited to basic html and css and I can't for the life of me figure out how to animations to work. I've figured out how to make a carousel by researching online that's fine that seems pretty straight forward, animating photos on their own seems straightforward... but trying to make an animation with any kind of control without java or scripts of any kind I can't figure it out. Was hoping someone could help me make a super basic one even if it's just a general image rotator with a hover to pause, but preferably something that rotates automatically and has navigation arrows or page dots...
I found this as something that might work for our site, but I need to reach out to our provider to find out why our host site is replacing the ">" between ".st-slider > #play1:checked" with garbage text preventing me from seeing if this animation will actually work (It should since there are no scripts running it and other keyanimation based css sliders work on our site). Then I would like it to look better... But to give an idea of what kind of project I'm looking at please see the link below.
https://codepen.io/miriamcc/pen/KzGGqZ
enter code here
Hello dear did you try to use
#keyframes
?
that would do the automated part of the work
I've been searching around and I can't find for the life of me where an extra div is being created... the only reason we care is that it's bringing a mid tone grey background color over the Nav bar and it's killing the look of our app.
Hoping for a bit of guidance, happy to post up any relevant code needed; nothing in home stands out (extra div shows up everywhere, so I'm guessing it's not in a single pages worth of css/html).
It might be worthwhile removing all classes from the navbar area, and then adding them back one by one and seeing which one/s cause the problem. Also check the Ionic documentation here to see if there's something else to check out.
I am sorry in advance I could not get this to work in jsfiddle. I really am just not sure how to do it and I've spent way too long trying to figure it out.
Anyway I have this zozo tab (which no longer offers support) I am using HERE, When I make the window small for mobile size and click the "Overview" link that entire drop down menu goes under so there seems to be two "Overviews" instead of on top of it. Can someone please help me figure this out? I would great appreciate it!
CSS her HERE and HERE
JS for tabs is HERE
So working on this website and faced with an issue of blank space on the right side of the page on mobile view. I've looked at everything and still cant seem to get rid of it.
I deleted each section of the site hoping to find the area where the issue was (overflowing form something I thought) but it was always there so I don't know what to do.
[link removed] is the site on the dev server.
Im really stumped by this so hope someone can help me. Thanks in advance
The issue is visible only on mobile and almost no way to debug that (well there is a way, kind of a hard way to debug that).
Any long story short ... i suppose one of the page elements is not behaving as it should in mobile view. With this i mean, an element, element X for example is wider then the width of your mobile screen so it creates that white screen issue.
What im gonna propose here is not a 100% solution, is more like a workaround but it will work if the issue is what i supposed:
Apply this css rule on the body tag:
body { overflow-x: hidden; }
http://validator.w3.org/nu/
Copy Paste your url or paste your code (at the "Check by" dropdown) and you'll see unclosed elements.
Close your elements, I think there is the solution
Thanks to everyone for your help. So I found the issue, As Arber suggested it was an element behaving badly. It was the contents of the carousel overflowing causing whitespace to appear, so I was able to rectify the problem. Thanks again! Tthe validation helps with a few other side issues too.
I've been wracking my brain trying to figure out this issue, and I can't seem to figure out how to get my menu to display over the underlying elements.
I've had this issue before, but I've always been able to remedy it by fixing the z-indexing.
I can't seem to manage it this time -- any thoughts guys?
Here's an example of the site(not complete, just working on this issue right now) where the issue is happening, you should be able to play with it a bit with google dev tools or something a-kin :).
http://202388.yourwebsite.cc/
The menu isn't appearing because of the overflow:hidden portion of .container. If you remove that it should work just fine.