Mobile optimization: Make notification menu with position:absolute scrollable - javascript

I recently bought Moltran which is fine but has a big disadvantage: The notification menu disappears on mobile devices, which is not suiteable for me. So I learned that that this can be done removing the hidden-xs class of the li notification element. This will turn <li class="dropdown hidden-xs open"> to <li class="dropdown open">, which works fine.
Now I stretched the small menu on the full width of the screen If the user has a smaller device for better usability:
#media (max-width: 767px) {
.nav > li.dropdown:not(.hidden-xs).open .dropdown-menu {
width: 100vw;
}
}
Everything works fine, until one thing: I'm not able to scroll in the menu. Using a modern 5" smartphone horizontal, 3 elements at the end are hidden. Instead the scrolling will affect the background caused by the absolute position.
A simple demonstration on the online demo to make it more clear: I only removed the class hidden-xs because otherwise the menu would not appear on small windows in the line <li class="dropdown hidden-xs open"> as I said before.
When the window is very small, its not able to see the full notification menu and the user isn't able to scroll there:
As you can see, the scroll bar on the right is at the bottom, but you can't full see the notifications because the scroll bar doesn't affect this menu. I tried a few things, mainly switching to other position types because the absolute position seems to cause the issue. But nothing worked, seems like I'm in a blind end.
So my question is: What changes are necessary to keep the functionality as it is, but provide a way to scroll in the notifications on smaller devices?

Well. If I understand correctly you should set overflow to your navigation bar. And it should do the trick.
.topbar{
height: 100%;
background: transparent;
overflow-y: auto;
}
EDIT: This will set height of your topbar to 100%. Because of this it will overlap all elements on the screen.
As an alternative you can add a separate class when notification button is clicked and style this element only in such case. For example:
.topbar.notification-open{
height: 100%;
background: transparent;
overflow-y: auto;
}
And toggle class with jQuery:
$('.dropdown-toggle').click(function(){
$(this).closest('.topbar').toggleClass('notification-open');
});

You can make the notification panel scrollable:
.navbar-nav .open .dropdown-menu {
background-color: #ffffff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
left: auto;
position: absolute;
right: 0;
z-index: 100;
// Extra code required
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* lets it scroll lazy */
max-height: 500px; //or whatever. Could be 90vh
}
This should work just fine.
Hope it helps.

Just give a fixed height to ur notification area with media query on small device and set overflow-y:auto. Height should be in px only. For example let notification_area is your div class..
#media (max-width:600px){
.notification_area{
overflow-y:auto;
height:300px;
}
}

Related

React JS: How to implement scroll bar in one particular div?

I am creating a movie app. I am facing some problem on implementing the scroll bar.
While scrolling I want the header div to remain where it is. I don't want it to disappear while scrolling down. But the div located vertically bottom to the header must be scrollable.
This can be found in amazon.in
On searching Harry Potter, this page loads
On scrolling down, you can see that the header remains fixed.
How can I implement this in React?? Please share the necessary code/documentation. Thanks!
This actually has nothing to do with React. This has to do with basic HTML and CSS knowledge.
Here is my preferred method:
<div id="navbar">...</div>
<div id="content">...</div>
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
#content {
margin-top: /* size of navbar */ 50px;
}
You can add scroll bar in a div by using overflow property with some height.
CSS:
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
HTML:
<div class="ScrollStyle">
Scrollbar Test!<br/>
Scrollbar Test!<br/>
</div>

Menu items after burger button too close to burger

In mobile/tablet mode, I have a burger button that when I click on, menu items appear beneath it.
The appearing menu items are too close to the burger, causing a UX problem.
Given I need them to be even more beneath, I tried:
#burger {margin-bottom: 20px}
media screen and (min-width: 768px) {
#burger {margin-bottom: 0}
}
this isn't good as it enlarges the entire menu area (#menu-primary). Targeting menu items themselves also does that...
You could see the problem live in my site when surfing in mobile/tablet mode.
How will you solve it?
You could target the first child in the list items like:
.menu li:first-child {
margin-top: 20px;
}
if you don't want the size of the menu bar to increase you could remove the padding here. I have removed the 20px and changed it to zero.
#media (max-width: 767px)
.elementor-14 .elementor-element.elementor-element-49f59133 {
padding: 20px 0px 0px 0px;
}
Or set a max-height to the parent element.
i am not sure i understand right but i thing you want to vertical align the compressed menu. Please try this code and tell me if this solves your problem
.elementor-element.elementor-element-7955b736.elementor-widget.elementor-widget-wp-widget-nav_menu {
position: relative;
top: 10px;
}
i notice there ir a 'bottom' padding of 20px, here i am telling the hamburger options to move 10px bottom to look like perfectly centered

Unable to scroll mobile dropdown menu inside of fixed header

So I made a fixed dropdown menu that changes to a hamburger menu for mobile. Everything works fine on desktop but on mobile I'm unable to scroll the menu items. I have tried a plethora of suggested fixes for this but none of them fix my issue. Most of the fixes I've come across have included some form of the following but have not worked:
max-height: 300px;
overflow-y: scroll;
Here is a fiddle of what I have right now:
https://jsfiddle.net/doitliketyler/2gqd0hLs/3/
The black square is the mobile hamburger button. Does anyone know how to get this working properly and smoothly for mobile? Any help would be greatly appreciated. Thanks so much.
A position of static will prevent scrolling.
So to fix this, you have to set your menu to a position of something like relative for mobile.
So for the .header selector inside the #media only screen and (max-width:960px) media query, set the position to relative.
#media only screen and (max-width: 960px) {
.header {
padding-bottom: 0;
position: relative;
}
}
Edit 1:
To keep the fixed menu, one option is to set the dropdown portion to be a position of absolute with an overflow-y.
#media only screen and (max-width: 960px)
.header .header__column--navigation {
margin-top: 80px;
position: absolute; //Added
min-height: calc(100vh - 110px); //Added: set the second parameter of calc to the height of your header. ex: https://c.flm.pw/2018-06/6oiip.png
height: 100%; //Added: Tell the absolute div to take up as much height as it needs.
overflow-y: auto; //Added: Make the absolute div have the ability to scroll, but hide the scrollbar when it doesn't.
}
}

Enable scroll for a div but lock it for another one

this is my website http://www.yarrutfranken.com/
if you press the 'plus' button on the homepage my contact information will show up. But I can not scroll on the black page. (try making window smaller then you will see).
There's some text falling off when you are on a 11" or 13" laptop.
so wrap up:
need scroll on black information page
if information page is active scroll must be blocked on 'homepage'.
please help me.
ps: i'm not a hero in javascript or other stuff. Just;
html
css
jquery
Add overflow-y: auto; to your #actinfo css rule in order to allow it to scroll if the content is higher than the element's height.
#actinfo {
width: 80%;
height: 100%;
background-color: black;
position: fixed;
z-index: 4000;
overflow-y: auto;
}

Javascript: having a scrollable fixed position element

I'm trying to achieve the following:
I have a pop-in menu docked to the left side of the screen.
The menu has only a small tab visible. Upon hover - it pops to accommodate its content.
The problem is, my pages are sometimes a few screens in height.
And sometime, so is my menu.
I wish to be able to dock my menu to a fixed position (so the tab is always visible), and have the menu scrollable, without the ugly scrollbars.
How could this be achieved?
Add to your css:
html,body { height: 100%; }
#menu { height: 100%; overflow: auto; position: absolute; top: 0px; }
Make sure the #menu is a direct child of body.
If this doesn't work, give me a link to a demo, or make one in http://jsfiddle.net/

Categories

Resources