I'm having an issue that only appears when using Chrome.
I have a menu at the top, a search bar, and then another bottom navigation menu below that.
image 1: menu
On Chrome, when I highlight over the top menu, the menu items appear like this (behind the bottom navigation):
image 2: menu breaking
And I can't select the items that are directly on top of or below the bottom nav menu. I can hover over menudrop1 and menudrop2 but I can't select menudrop3 (from image 2)
In Firefox and other browsers, this doesn't happen. And in addition, in Chrome the drop down appears completely opaque, whereas in Chrome, it has a much lower opacity.
The weird thing is, this doesn't happen everywhere on the site.
Any help with this would be appreciated.
Use z-index: 1; for your submenu ( parent of menudrop1, menudrop2 and ... )
Another menu | item1 and ... probably causing this problem
Related
I am currently developing a site that is almost done, however I am having an odd issue with the navigation on mobile.
The menu is collapsed using Bootstrap 3's collapse js. Everything works great, except when you open the menu it does not render my custom css immediately. It seems to open the menu, then jumps to the correct position and coloring. When you open the menu it starts on the right side, with the incorrect background color, then jumps to the correct positioning/color.
You can view the site here: http://brookmanville.com/
This issue happens regardless of browser or mobile device.
These fixes will make your menu more mobile proof:
Remove float: right; from .navbar-nav if it's the mobile version of your website. This behavior sorts out the sudden right to left movement.
Remove the margin on .navbar-nav, and give it a width of 100%.
I have a website that includes an image gallery that turns into a slideshow on click. The website is divided into 4 vertical sections and you navigate through it (jumping up/down from one section to the next) with a smooth scroll effect by clicking on the main navigation menu.
Everything works perfect with Firefox, but when I open it with Chrome 2 major problems:
1. The page keeps bouncing up and down like a yo-yo whenever you're in the "projects" section. Click on "Projects" in the main nav menu and you will see what I mean.
2. The slideshow doesn't work properly. Click on "Artwork". Then click on any image. You'll see that if you do this in Firefox the navigation menu is hidden behind the slides. However, with Chrome they are in the front. I have set the Z-index of the slides with #slideshow img {z-index: 1000} so I really have no idea why this is happening.
You will find my website here:
http://ninetieschild.github.io/my-site/
Thanks so much.
Issue:
$window.bind("scroll resize", function() {`
is wrong. It keeps auto executing continuously.
As this statement is always true
if(scrollTop > $('#services').offset().top-$(window).height()+300 && scrollTop < $('#about').offset().top-$(window).height()+$('#cogs').height()){
transform functionality after changes window size/scroll so the function gets executed again.
What are you trying to accomplish?
You just want to click on me menu and get scroll to that specific sections?
I'm working on a site here: http://teamcherry.com.au/
The site uses a responsive nav plugin, so when viewport is narrow enough the nav is hidden behind a Menu button. When the menu button is pressed, the nav appears. In Firefox and Chrome, the nav appears over the top of content, which is the desired effect in this case. In Safari and mobile Safari however, opening the nav up pushes content down, which isn't what I want.
I've been trying to fix the issue by applying position: absolute to various elements but the layout keeps breaking. I'm sure I'm missing something really obvious here! Anyone able to help me out?
Remove float: right from your nav style.
I am developing my first HTML5 page for mobile and desktop and I need to implement slide menu button! When you first click this menu button it will open menu which covers 50% of my screen and menu contain something similar to "log in bar"(some inputs and some text; like top right corener of FB), and after you click button menu, it will be hidden!
I have implemented some solutions but I'am not satisfied with them!
One variant of my menu is to do everything right but it is visible to user all the time! Animation works fine but when I want menu to be hidden, it becomes visible right of screen.
Other possible solutions : picture and buttons go under the menu! When it opens, it "push" pictures and buttons below.
P.S i tried to add image but it seems that I don't have more than 10 reputation! Also, I didn't watch tutorials for jQuery so if any solution is theer in jQuery, please suggets me..
I have a menu with a dropdown here. How do I make the dropdown to appear instantly, like on this site?
Edit: I figured out what causing the delay : dropdown wouldn't show up while the mouse is moving, it only shows when mouse is stopped.So if the mouse never stops on the menu item - dropdown would newer even showup...
Edit2: It appears, the problem is only presented in Chrome, FF and IE work as intended..
The problem is that the browser isn't loading your background image because it is initially hidden. The delay is caused by that image being requested from the server. I would pre-load it somehow-- maybe add a dummy pixel-wide div at the bottom of your page with that image as the background-image.