I'm working on an old website that the previous programmer actually died on whilst working on it (no I don't think it's cursed, but it is a bit of a maze of code that could feasably give someone a heart attack ;)
Anyway, I've been hacking and slashing my way through it and resolved many problems, including much of the responsive code that wasn't working correctly.
But I've been left with two problems that currently have me stumped.
Number one is that the drop down menus don't disappear (on mobile screen) when another drop down menu is clicked on. This creates a confusing layered effect.
The second problem is that the drop down option "Vacation rentals" brings up a search box, this is partially displaying off the side of the screen, and the internal date picker is also not displaying well. Any ideas?
Any ideas will be much appreciated!
Thanks!
http://spldev.sanpancholife.com/
Related
This is quite an unusual one, and I had no luck googling this issue.
Short version - I've created a basic webpage for my work, to streamline some tools into one place, which works differently when I open it at work, compared to when I open it at home.
Details - When I've designed it at home, I'm using a lot of hide/unhide content (bootstrap4 collapse buttons), which unveil content with a nice simple sliding animation, as does the carousel at the top with various images sliding across- However when I open the webpage at my place of work, the smooth slide animations are disabled (it literally just makes this appear and disappear, and the carousel just flicks between the images, rather than slides).
Could this be related to work corporation firewalls blocking certain bootstrap sources? Has anyone else ever had something like this, and hopefully solved?
Also - I know I could just do this via JS, but I just wanted to query this all the same as it's a very odd issue.
I'm an amateur web designer with HTML experience mostly. I'm building my own website for a hobby, and ran into this snag. I've only recently noticed it though, so I'm wondering if it has anything to do with the recent iOS update?
Like the title says, when I go to my website, everything is fine. Then I click on one of the links to the "Contact" page, let's say (or any of the links that take you to another page), and then hit the browser's back button to go back to the previous page, the button's image I had just clicked on ("Contact" button) has disappeared and I'm just left with the button's name I named it. This repeats for every button I click and then hit back in the browser. This only happens on mobile devices though (I've only had the opportunity to check on an Apple phone and iPad). It doesn't happen on my laptop. I've tried searching for answers to this, but can't find any. I've only just noticed this happening though, which leads me to believe it might be a software update issue? Although it's entirely possible I just never noticed before.
Here is my website so that anyone interested in helping can take a look and let me know what you think might be the problem/solution. Thank you very much for any help you may be able to provide.
https://www.atomicorchard.com/
It's okay on my end. Try optimizing your images and check your JavaScript. The problem may be occurred once that script is being executed. And try adding media queries.
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).
Hello I am trying to fix the look of this site my original site was this
http://graydaddy.com
but know that I integrated it with the grou.ps community platform the nav menu gets messed up and the image gets moved down by a bit.
I have been looking at it for a while but cant seem to find the error especially because I did not modify at all the div that contains the nav menu
here is the modified
http://www.graydaddy.com
This is probably a dum mistake by my part but thanks for any assistance
I think I know what your problem is. Each navigation image is a different height. And because there are no styles applied to the table cells, the inconsistent image sizes are throwing off the spacing between the horizontal line rows and the image rows.
If it's possible, redo this navigation with an ordered list, and text as HTML text, not image text. Using images as navigation in the way that your site does, is very bad practice.
If it's not possible, re-create each image to be the same exact height.
*Edit: it just dawned on me, you probably used some sort of online GUI editor to create this navigation, if that's the case, there is not much I can help you with as I am not familiar with the Grou.PS. But you'll probably have to redo the navigation to be more precise
Thanks
I am attempting to make a dropdown menu - in CSS only - that drops down on mouse-click (instead of on mouse-hover) and has a scroll bar, as there will be around 22 options. What I have so far, is here: http://fiddle.jshell.net/yobqsjb2/1/
(I am limited to CSS only, as Javascript, PHP, etc are blocked by the university. I also cannot use the select or options codes (IE: [select name='menu'] [option value='1']first item[/option]) in the HTML of the page, because the editor keeps stripping them out. I gather from looking online that the TinyMCE visual editor on WordPress is doing this, but unfortunately, I have no access to change it, so I need to work around the limitation.)
I've grabbed code from other sources to tweak, but I fully admit that I was more on the PC repair side of things a few years ago (career-changed and now migrating the company website in the new field) not a former programmer. A lot of what I'm seeing that is supposed to fix the problem for other users' code, I don't quite understand what they're doing well enough to apply it here...
I know the "on click" problem is with the a:hover and li:hover (vs a:active / li:active), but when I switch them, the menu goes away when the mouse hits it. I read that I needed a 'display:block;' somewhere in the code, but based on examples shown, I've put it in each code segment and in all of them... it doesn't seem to want to fix the problem.
In terms of the scroll bar, everything I keep finding is in Javascript or, in a few places saying that it can't be done for IE (ideally, it would work everywhere, or have an IE alternative that wouldn't look funky).
Are either or both of these things possible? I've figured out how to change the dropdown menu's size, color, borders, etc, just not these two items...
Thanks in advance
For the :focus to work, you'd need a tabindex for the element (li).
Fiddle: http://fiddle.jshell.net/yobqsjb2/3/