I can't seem to figure out why on mobile devices (my website: https://www.mchna.org/?p=news) (can be reproduced in desktop browser emulating mobile as well) the div hamburger menu items (though not visible unless the hamburger menu is expanded) are laying on top of the page even though the hamburger menu has not been expanded. I've been playing around with all the tags, but to no avail. This causes the links at the bottom of my page to not work correctly. Any help is greatly appreciated!
Try wrapping the div #main-wrap on the news page inside a div #main-content similar to the markup on the other pages where this is working.
Edit: The reason for this happening is the z-index: 8 on the #navmobile which moves this "layer" in front of the other content. By giving the content position: relative and z-index: 10 (or anything higher than 8) it should work.
Related
This page has a content area where all the posts are held and a side bar. The content and side bar menu are sized properly and fit where they're supposed to in Chrome with the actual posts area taking up the left and the sidebar sitting on the right.
In IE, the images are full-width and I'm not sure of a better way to fix this.
The same issue was occurring where the images were full-width and adding the width:100% attribute to the .htheme_post_image img element seemed to fix the issue. If you view in IE, the two areas are side-by-side. However, if you click on a post.
The side menu is underneath the post and the images/text are full width.
If it helps, I'm in IE 11.0.9600
It seems to be fixed if you remove display: table; from both the .htheme_container class and the .htheme_content class.
This seems to fix your IE issue and has no effect on Chrome, so maybe it's simply not needed. But I did not create this theme, so I have no idea of any side-effects this may cause.
I am having an issue on iPhone 6's only where I have forms that pop up in a lightbox and when an input is clicked on the lightbox jumps down the page out of view. After you begin to type the lightbox jumps back into view and will stay in place for any successive inputs that are filled out.
This can be tested here, Just click any of the green boxes under "Quick Links" and you will see.
Has anyone ran into this issue and if so is there a decent solution? CSS? Javascript? Anything?
I've tried all kinds of hacks and nothing is working. It works fine on iPhone 5 and before. I don't get it.
From my inspection its a CSS issue. Your top level lity <div> has top, left, right, bottom: 0 - that will make it the entire height of the website (about 5000px) - what you actually want is for it to be the height of the viewport (about 600px depending on device). Remove bottom:0, add height:100vh; in CSS the top level .lity-iframe <div> and also to the .lity-wrap <div> - also that div probably doesn't need to be position:fixed, since it's already inside the position:fixed; lity-iframe <div>
That should work.
On my website I use pure.css and the navbar consists of more elements than a small screen can display without scrolling. Therefore a scrollbar appears in that case, which I don't want.
I would like the navbar to stay at the top so that the navbar and the content scrolls simultaneously. When I use position:absolute; everything looks even worse. Also the mobile version of that navbar should still work (on mobile screens scrolling though the navbar should still be possible).
I also tried to deactivate overflow-y, but then, obviously, not every element on the navbar is clickable.
If you want that navbar and content scroll simultaneously, you shouldn't use position:fixed.
Remove position:fixed
Add float:left to menu div
Add float:right to content div
If I misunderstood what you want, the comment made by Marco Valente should be nice.
I'm implementing a fixed vertical menu. It works great on desktop and looks great on mobile devices (IOS, Android)... as long as you don't zoom in on the page. When you zoom on a mobile device, the fixed element begins covering the other page content (as it should since it's fixed to a certain place on the viewport).
But what I'm looking for is a navigation bar that's only fixed vertically. So if you zoom in and scroll horizontally the navigation bar doesn't cover the content. Is there a way to do this?
This is a common problem and as far as I know there is no way to fix only vertically using merely CSS. You have the choice between either:
Disable zooming using viewport meta tags (but this can be bad for accessibility).
Control the menu position using javascript on mobile devices. For instance by instead of using a fixed position, give it an absolute position and on every window.scroll event, update the top position of the menu. This however will result in unpleasant results on devices that aren't state of the art (so on most devices you will see the position update with constant shocks). Second issue will be the smooth scrolling on Apple devices which prevents you from getting any information about document scroll position during 'smooth scroll'. So you would then also have to disable the smooth scrolling (possible with a CSS line on the body) but this also gives the user a negative experience.
This is why the menu is usually turned into a hamburger icon and only appear once the hamburger icon is pressed. The little hamburger icon will not be so annoying in the top left corner during horizontal scroll, as it is quite small.
I've been trying to fix a problem with my nav bar on my website. If I move from the home page to the gallery page, the nav bar changes slightly (the navigation links move up by 2 pixels), and the bar seems to shift to the right, though I'm not sure why. The same happens when you move from the gallery page to the about page, only it doesn't shift to the right.
the URL is www.peach-designs.com. The code is really too big to post, but perhaps somebody could help me by looking using Firebug or Web Developer tool.
you can also change the class id wrapper in index.php
this will make index page to be same as the other pages
enter code here
#wrapper {
margin: auto;
width: 990px;
}
I'm assuming you want the navigation on each page to be in the same place it is on your home page (it's properly centered on that page). Also, I've only tested in Firefox (because you suggested using Firebug), where your site seems to work - in Chrome there are no images.
First, remove this from galleryStyle.css:
#wrapper {
height: 599px;
margin: auto;
width: 990px;
}
Then do this on gallery.html, news.html, about.html, and contact.php:
Move <div id="main"> to outside and before <div id="wrapper">, so it ends up like this:
Doing this centres your white overlay properly. At the moment, it's a bit too far to the right.
Your wrapper div on your gallery page is narrower than your home page (only 990px). Because it's occupying less space and being centered, your nav div is nudging to the right on the gallery page to occupy the smaller space of its parent div (wrapper) than the wider space of the home page. Try using consistent sizes and you'll run into these problems less.