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.
}
}
Related
My problem is quite complex (difficult to explain at least).
I have a responsive navigation bar that is by default NOT on the top of the page but you have to scroll down a bit for the navbar to reach the top of the browser window.
On desktop (48em<) one can simply scroll through the navbar (so it simply disappears when scrolling down) but when scrolling back up, it gets a "sticky" class (thanks to JS) and appears on top.
On mobile, the navbar gets sticky once the scroll position reaches the navbar element.
My problem is with the mobile view. I had to add a piece of CSS code so that the page content won't flicker (jump) when scrolling down. (I only need it when the sticky class is added by JS.)
.sticky + .content {
padding-top: 58px;
}
Which works just fine when the hamburger menu is CLOSED.
When the menu is opened, the navbar's height changes and it requires more padding on top for it not to make the page content jump. See the gif below. 🤔
If I change this padding to 248px then the content doesn't jump when the menu is opened, but it jumps when it's closed. 🤦♂️
.sticky + .content {
padding-top: 248px;
}
I guess I should write a piece of JS code that would do this:
If nav checkbox is checked then change .sticky + .content {padding-top: 248px;}
If it's unchecked change it back to .sticky + .content {padding-top: 58px;}
All this only below 48em. On desktop the padding is supposed to be 0.
Here's a fiddle with the code:
https://jsfiddle.net/zsoltszilvai/t0zLv7yn/48/
I don't know much about JS so any help would be appreciated.
The problem is not in the padding-top.. Actually you shouldn't manipulate your sticky class. CSS position: sticky does for you all the job automatically. You have to fix 3 things:
You don't need to toggle .sticky class on scroll.. You have to remove this code:
// You don't need this all
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
you permanently add class sticky to the header
<header class="header sticky" id="navbar">
You remove
#media (max-width: 767px) {
.sticky {
/* position: fixed; You don't need this */
}
}
Check this fiddle:
https://jsfiddle.net/tyminko/coetd4jx/1/
The modern answer to you problem is to position submenu with absolute.
.big-wrapper-main {
position: relative;
}
.menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 5;
background-color: white;
}
Submenu positioned that way doesn't change the height of the parent, is positioned after it (because of top: 100% - 100% stands for 100% height of the parent).
The problem is that you are using float and clear and we don't do it in web development for the while now and the height of your .big-wrapper-main is 0px so you have to add position relative to #navbar (when it is not fixed).
I had to add .header.sticky to overwrite position relative.
.header.sticky {
position: fixed;
}
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
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;
}
}
Hi in my website I have one container with Registration form elements. Now I want to change the size of labels, Text fields and button based on the container size.
My requirement is The textboxes should be on the right of the labels (and expand up to 40px before the right border of the grey container - 40px is the container's padding anyway) when the width of the screen is >=1024px .
If the width of the screen is <1024, the textboxes should be under the labels and their width should be as long as that of the grey container minus the container's padding on the left and on the right side.
Please suggest me the way to do this.
I have also attached a screenshot:
Here background with grey color is the container in website.
.dnnForm .dnnFormItem {
clear: both;
width: 100%;
display: block;
position: relative;
text-align: left;
}
#media screen and (min-width: 1025px)
#rox-custom-box-06 .dnnForm {
width: 100%;
}
#media screen and (min-width: 1025px)
#rox-custom-box-06 .dnnFormInput, .password-strength-container, .password-strength {
display: inline-block;
width: 35% !important;
}
To accomplish this you are going to need to think a bit more granular in nature with your solution.
The Container &/or form will need to have specific CSS classes applied so that you can then make things work. You might also look at using Bootstrap or similar in your skin to assist as it looks like you are trying to make a responsive design, but without having any supporting framework.
Otherwise, a more detailed example with your HTML could assist.
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/