Fixed menu is not working in mobile or responsive
I have a floating menu on the website site, it is working perfectly on desktop sized window, but when i resize the window to mobile size, the menu isn't floating anymore, and only became part of the page. I am almost certain that it has something to do with my other elements that are fixed or relative in position, but couldn't find the culprit.
It is the blue menu on the right side.
The floating menu is made with a plugin called "sticky side buttons", I have reached out for help but no response yet, so I thought I would try asking here.
URL: http://umassfd.org
Thanks!
Can you try this?
#newBridge .nb-icon-wrap {
position: fixed;
box-sizing: border-box;
min-height: 77px;
min-width: 146px;
}
Related
I have what seems to be a simple issue with a website on iOS (testing on my up to date iPhone 13), but I just can't seem to find a fix that works. Starting to pull my hair out as it seems to be a bug rather than an actual issue with how I'm laying out the page.
The website has a very simple header that is fixed in position, which contains an absolutely positioned menu button on the right hand side. (Edit: just to clarify that the button triggers javascript to open a full height menu div that covers the left side of the window. All this part of the functionality works correctly, it's just that tapping on the button to open this navigation box does nothing until I scroll down)
On desktop using Chrome dev tools everything works fine at all browser sizes.
However, on iOS when loading the page the button is not clickable. If I scroll down slightly suddenly I can use it. Scroll back to the top and I can't use it anymore. This happens even if I remove all other content from the header leaving nothing but the menu button. I've tried everything I can think of but just can't get this button to work when the page hasn't been scrolled.
It seems like an issue of something covering the button, but there is nothing. Even with the header otherwise completely empty I get the same issue, and the content clearly can't be covering it as it visibly scrolls behind the header.
This is the css/html which I believe to be relevant: (#page contains the rest of the document and is padded to clear the fixed header. I have also tried removing the padding and using an extra div to push the content down as well just in case padding on a top level element was messing with things). ui-container is used to limit the width on large screens and simply has width:100% on smaller devices.
#top {
position: fixed;
width: 100%;
z-index: 10;
}
#header {
background-color: #fff;
padding: 20px 0;
}
#mobile-nav-btn {
display: block;
position: absolute;
top: 24px;
right: 20px;
font-size: 22px;
cursor: pointer;
}
#page {
padding-top: 113px;
}
<body>
<div id="top">
<header>
<div class="ui-container">
<a id="mobile-nav-btn"><i class="fas fa-bars"></i></a>
</div>
</header>
</div>
<div id="page">
... content ...
</div>
</body>
Please use:
<button onclick=“window.scrollTo(0, 500)”></button>
Well it looks like it was the menu itself causing the problem as it was hidden using opacity and moved to top: -100% to get it out of the way. Seems that iOS messes around with the document height and this causes problems in some instances.
This may be specific to devices that have a rounded display, or may also affect all iOS devices as I know that the fact the address bar & navigation buttons auto shrink/hide on scroll can also play havoc with positioning.
I have a mobile menu for which I would like to increase the size of the menu by dragging it. Currently what I am doing is fixing it to a size of 50% of the screen. Below is how the menu looks.
The CSS, which I used to drag, doesn't work in this case.
.cbp-spmenu-bottom.cbp-spmenu-open {
bottom: 8%;
width: 100%;
/* height: 55%; */
background: black;
opacity: 1;
overflow-y: auto;
position: fixed;
resize: vertical;
}
What could I do, so that I could touch the top bar, and resize the menu?
Just make sure you dont set the position of the css to be fixed otherwise,you wont be able to drag.
position:fixed
Or you can set the position of the but what you can do is set it fixed after you resize and drag it as shown in this thread
Fiddle
Here is a website which might help you. If this is unable to help you, you could check this website which has information on everything you can ever know about coding.
EDIT:
You could try this sample code- <button onclick="myFunction(width:200%;height:200%)">Increase Size Of Menu</button>
I hope I helped you enough so you can be able to do what you want to do!
The problem with the resize property is that it is not supported by most mobile browsers. You can find more details here and here.
If you want mobile support a javascript solution would be your only choice.
You can try a library like interact.js which seems to work fine on mobile devices.
I'm pretty lost as to where to even begin so I will try to explain. I'm making a Hardware Store for my term project in Aptana Studio and am running the site in Google Chrome. Apparently, running a site in Google Chrome makes it automatically responsive? As you can see in the following screenshots, the site is fixed on the left side and responsive on the right side:
(resize 1)
(resize 2)
(resize 3)
(resize 4)
Of course, the black and white photo does not resize, but I actually don't want it to. I just want what is in the header (the logo and photograph) to stay the same size - to stay fixed on the page. Take Ace Harware's website as an example: http://www.acehardware.com/home/index.jsp
Everything in the site is constrained to certain dimensions. When the page is fully open, the content is centered and there is a margin of white space on either side. And when the page is resized (smaller), the margins start to disappear until finally there is a cutoff point - and the content does not change position anymore.
(full page)
(first resize)
(second resize - even though the page is smaller, the content is fixed)
This is exactly what I'm trying to do with my Hardware Store site. How do I achieve this effect? I've heard of bootstrap but I really don't know enough about it or which template I would use. Thanks for any help/adivce. If it's too complicated to explain here, please send me to a good tutorial you might know of.
What you're trying to do (at least, what i understood) is not a matter of "responsive". You're just trying to keep the whole page content always centered. (acehardware.com is not responsive eather).
You just need to define a constant width for the main div (the one which will contain the whole page content, except the background), and then keep it centered in the outer div, no matter the screen size.
This is what you got to do:
#main-wraper {
margin-top: 5px;
margin-bottom: 5px;
width: 360px;
height: 420px;
position: relative;
left: 50%;
margin-left: -180px;
background-color: white;
color: black;
}
#outter-div {
background-color: grey;
position: absolute;
width: 100%;
height: auto;
min-height: 100%;
overflow: hidden;
}
<div id='outter-div'>
<div id='main-wraper'>
<!-- The whole page content -->
</div>
</div>
This will keep the div centered in the parent container, and the parent container will be hidden the smaller the screen is.
I used smaller dimensions for main-wrapper in the snippet in order to make it easier for you to watch the effect in a smaller box. BUt you should use your own width. Just have in mind that the "left margin" for that div must have "half the width of the div" as a negative value. "left: 50%" will always center the div and keep the effect.
Hoping that the community will be able to help me out here as I really am stuck. I've having 3 I issues with my website:
Website Link
For some odd reason - I can't get my columns to line up straight. The entire page seems to be more to the right than in the centre on both desktop and mobile
What I'm trying to do with the top image is have it take up the entire page upon loading, and then as you scroll, the image disappears. For some reason, on mobile, the image doesn't cut off and allows for the user to scroll to the right.
On mobile, I can't get the top image to show properly. It stretches vertically, and users have to scroll all the way past the photo to get to my content... I want the main image to resize like it does on a desktop browser and only take up the screen real estate when the page loads
Any advice here would be helpful...
In your projects sections - if that is where your issue is has padding on a UL tag - which is causing it to look misaligned.
You could do this to fix that section:
ul.skillssection {
padding-left: 0;
}
It'll be more helpful for the community if you made points or set up a jsfiddle.
Update - answer for number 2.
I can't seem to replicate it but I've noticed you've got:
img.bg {
min-height: 100%;
width: 100%;
min-width: 780px;
overflow: hidden;
}
I would change it to:
img.bg {
min-height: 100%;
max-width: 100%;
overflow: hidden;
}
So the max-width is always 100% and it should follow the width of the parent.
I have a menu in a div on the side of the browser and I would like to keep it in the fixed position. However, the menu may exceed height of some screens and that would result inaccessible links. So I would like to make the menu scrollable in such a case. Unfortunately the combination
position: fixed;
overflow: auto; (or scroll)
doesn't really work. I.e. the scrollbar is faded out (immovable). Is there a way?
Thanks in advance
EDIT
The menu is similar to the one to the right up on this page. Only a bit larger. If you open that page and decrease the height of your browser window, part of the menu remains inaccessible. That's what I want to avoid.
And no, my solution doesn't work in IE, Chrome, Opera or Firefox.
Add these to your declarations:
top: 0;
bottom: 0; /* or height: 100%; */
You can replace the zeroes with larger values to add margins.