I recently switched my menu to a responsive menu. I'm not the best with html so I used a free menu. It works perfectly fine, even on mobile, but it doesn't seem to work on firefox. Sadly our site gets a bit of traffic after some advertising for our horse and I just switched the whole site to the new design. Now I don't want people to look at our site and not see a menu so I don't know what to do which is why I'm asking for help here.
http://ykw-gypsyhorses.com/ is my website. Does anyone know how to fix it?
I don't want to mess up my coding again so I haven't tried anything yet.
Try adding position:absolute; and z-index:10000; to the menu's selector. This will ensure that the menu stays on top.
Related
So, here's a weird issue I've come across with Safari on Mobile—I suspect there's one root cause for all of it, but have not been able to figure it out:
Links wrapping images don't cover the full width and height (as they should screenshot below), just the upper left corner
Linked Buttons only work on the left half
Links with: hover will hang on the hover and you have to press through
To make things worse, development tools that are supposed to simulate iPhones don't show anything funky—the whole image/button should be linked, etc.—but when you use the site with an actual device, the above happens.
I know, I know, this feels like such a basic question, but I've been banging my head against it for two days now.
Here's my testing page, but you'll see it intermittently across the site: https://redcowmn.com/testing-safari-ios-issue/
Is there a stray line of code that tells Safari to misbehave?
Even an ultra simple <p>Hi</p> acts unreliably.
I'm building on the X Theme framework on Wordpress (where I've got 20+ other sites), Yoast SEO, Wordfence, Gravity Forms, WP Rocket (in Safe Mode), WooCommerce, and Stripe for WooCommerce.
Thanks, folks.
Modal screen!
I had a modal screen acting like some sort ghost element, screwing with the z-index, etc., etc. That's why only parts of the image were active.
Very strange that only Safari had an issue with it, but anyways, that was the issue.
I guess that's what I get for trying to hiding a required ugly embed off screen... :)
Help. I just upgraded my website so that it's mobile-friendly. Now a lot of links don't work. In fact, the very same link will work in one place on the page (the menu), but then not work elsewhere on the same page. I seem to have numerous links throughout the site that don't work even though the code looks right. Even when I put in absolute coding, it still isn't clickable. I would appreciate any help.
Thanks. This is my home page: http://hotsermons.com/index.html
The problem you've added some divs on links, So when you hover on the link, you actually hover on this div not the link.
To solve this make sure you're using position and z-index properties correctly.
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
Currently having a big problem with the layout of a site. It works fine in every other browser but for some reason, in IE, the menu's aren't expanding when they are clicked on. The screenshot below is how the list should look when a button is clicked on, this has also pushed down the elements of the bottom of the website such as the footer and images. The website address is www.citybathcoll.ac.uk if you want to see it first hand. From what I can see, it might be an unclosed tag but I can't see anything that stands out. Any help would be appreciated, Thanks.
Screenshot: http://imgur.com/ML3BYRk
Today I have launched a WordPress blog it took me much time to develop the theme for. Now it was the first time I could request the site via iPhone I was just shocked. I thought it would be a simple task to realize a touch menu by writing simple HTML and styling it taking advantage of the :hover-state to display or not display it's content.
If you switch your Browser to a mobile user agent and load this site (make the window about 640px wide before), you will see my light blue widget bar. Hovering over the icons on it will toggle the inner containers with the main widget contents — works like a charm.
Unfortunately, when I call the site on my iPhone, that bar with the icons will appear but will not be touchable at all. Damn! What's wrong with my code? I hope you can help me. Thanks in advance
Here is what I found with hover in iOS. http://www.websitecodetutorials.com/code/iPhone-&-iPad/apple-iPhone-iPad-IOS-simulate-hover.php. It may be the fix to your problem. Or others down the road.
"With the rule -webkit-transition:all 0.3s ease-in-out; (and possibly others) in place iOS won't hover unless you add display:none/display:block or display:table/display:block. Additionally I found that, without the hover code in place, if you actually have a destination link in the href, upon clicking it, it just strait launches to it. With the code in place, you click once for hover event, and an additional time to follow the link. So if you find the iOS device won't (or correctly) hover for whatever reason here is your probable fix."
Now I figured out I never could get it working the way I wanted when posting this question (I'm sorry the link doesn't show it anymore). Explanation: My markup was like:
<li class="widget-container">
<p class="widget-title">Categories</p>
<div class="widget-content">
<ul>...</ul>
</div>
</li>
The style was like:
.widget-content {display:none}
.widget-container:hover .widget-content {display:block}
I'd love to code as simple as this but it won't work for a good reason: On touch devices, the touch-action is always targeting the uppermost object in z-index which in this example would be the .widget-title. Thatfor, the wrapping .widget-container can never be touched and thus its :hover-state will never be triggered.
This exercise made me recognize a touch-screen-optimized site has to incorporate JavaScript to work well. So I came up with a jQuery accordion solution now.