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.
Related
I have one website onto the live server, but I am facing a problem into the navigation bar. The nav Items just blink for a second or two and they disappers. Why this is happening?
I have made the UI using bootstrap.
you may visit the website as under www.mathrubhumigroup.com. Please inspect the site and tell me why this is behaving oddly (specially the navigation bar items).
The navigation has disappeared because the collapse class has been applied to the navigation container, and it has the style visibility: collapse, that's why it has disappeared.
If you remove the CSS or override it with new CSS, the issue is resolved.
CSS:
.navbar-expand-lg .navbar-collapse {visibility: visible !important;}
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
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 developing modal windows with the ability of being scrollable, like pinterest ones. When they are fired define overflow: hidden on body and overflow: auto on the modal box container. This works very well on desktop browsers but my first test on iPad (and I assume that probably on iOS in general) reveals a problem:
When the scrolling of the modal ends, if the document is longer than the modal the scrolling continues.
I tried this with the intention of only accept scrolling if it is triggered by the modal or its container:
// Disable browser scrolling on iOS
$(document).on('touchmove',function(e) {
if (($(e.target).attr('id') != id) &&
($(e.target).attr('id') != ('modal-'+id))) {
e.preventDefault();
}
});
And it really works doing strictly that. The modal scrolls and when it ends scrolling the page is possible only if you scroll inside the modal.
Do you have any idea?
Try it in your ipads if you want (you have to click on the modal button): http://www.onebigrobot.com/beta/altair/transforms-so
Thank you in advance!
Small changes are powerful!
All the problem is solved changing position: absolute by position: fixed on the modal container (and also on the dark mask of the background if needed). In fact with absolute positioning the modal only worked because the button was at the top of the page.
With fixed positioning desktop browsers works perfectly, and on the ipad something interesting occurs. When the scroll of the modal ends the scroll of the page begins to work but with the modal always on top well positioned.
I hope this question could be useful for someone.