I have a flyout menu for screens below 992px, but the menu items extend below the screen. When you scroll, it’s scrolling the content behind the menu. I’m guessing it’s partly due to absolute positioning, but not sure how to make the menu scroll down.
Here is a link to the dev server http://phiaconcepts.devlocation.site
You could have a condition which sets the body to overflow: hidden if the menu is open.
I found a solution..
I added this inside the max-width : 992px media query
.fixed-top{
max-height:100vh;
overflow:auto;
}
Related
I'm working on a mobile navigation option for my site and want it to slide from the right.
Here's a mockup:
https://codepen.io/rctneil/pen/OqzBjX
The issue I have is that by default the page scrolls over to the right when the nav is hidden.
I've tried adding overflow: hidden to .mega-wrapper which stops this scroll, but also hides the navigation when the toggle button is clicked.
Any ideas?
Kind regards,
Neil
I think that adding overflow: hidden was a good step. But after that you need to positioned absolute the mega-wrapper__mobile-nav and translateX the mega-wrapper__wrapper and mega-wrapper__mobile-nav
I made a demo
Site URL: http://www.digisalud.org/desarrollo/dona/
Hello!
Please, I am using DIVI Theme and I need to make these settings in the navigation bar:
NAVIGATION BAR:
The PLATFORM button on some laptop screens is shown on the down line of the navigation in screen with size between 1056 and 1346 px.
When you place the cursor on the DONA button or on the PLATFORM button near its corners, the text is shown in white, this should appear in yellow or blue.
I show you the images with the sample of each problem. This site is already in production and I need to close these details with the client. I appreciate the help very much.
Regards
Adriana
At 1280px, for example, there isn't space enough to put all the elements into the same row.
If you inspect all the element's width, you'll see that the menu container must have, at least, 1030px of width to keep all the elements inline.
Obviously, like your menu container width is setted to 80%, when the screens size is, for example, of 1280px, the menu container have a width of 1024px (that, like I said, is not enough).
One solution can be to force the container to cover the entire width in those resolutions.
You can approach this using media queries.
Something like this:
#media(min-width: 1024px) and (max-width: 1366px) {
.container.et_menu_container {
width: 100%;
}
}
Snapshot with the Plataforma button hovered:
P.S: You can also adjust the paddings/margins of the menu elements (logo, menu items, buttons...)
I have 3 divs nested like so:
container
drawer
drawer-content
I want vertical scrollbars to appear when viewport space is restricted. To do this I'm giving the style overflow-y: auto; to the container div and the drawer-content div. I want both these scrollbars but not for them to both appear at the same time.
There is an action which opens the drawer and before it is triggered only the container div is visible with it's scrollbar. After opening the drawer, the drawer and drawer-content divs overlay the container and I want the container's scrollbar to not exist, and only the drawer-content's scrollbar to appear instead.
This screenshot when the drawer is open shows the problem. There is a red border for container div, blue for drawer and green for drawer-content. I'd like the outer scrollbar, which is on container div, not to appear.
Of course if viewport restriction occurs once the drawer is already open, this is a non-issue. It's an issue when the viewport was already restricted before opening the drawer, so the scrollbar for Container div appears, then we open the drawer and drawer and drawer-content appear on top, but drawer-content's scrollbar should be the only one.
The reason I'm creating extra scrollbars is because this container sticks to the top of the viewport when scrolling down the main page, thus content could become inaccessible, which is undesirable.
I've got a Javascript solution to this but looking for a CSS one.
Here's a fiddle which is not exact but close to the situation. For some reason the scrollbars only show on Windows so far. Looking into that. https://jsfiddle.net/8z49z1dj/5/
Any ideas?
Thanks!
In your fiddle, you're explicitly setting the overflow-y on the container, but you'll only want that when the drawer isn't open.
You can add an extra class indicating the drawer is open or not on the parent, like so:
document.getElementsByClassName("container")[0].className += " has-open-drawer";
Then, in your CSS you're able to override that overflow behaviour like so:
.container.has-open-drawer {
overflow-y: hidden;
}
Bear in mind you might need to remove that class again if the user is able to close the drawer.
See my fork with the changes here on JSFiddle.
I have a sticky menu set up so that on my desktop screen, the menu stays at the top no matter where the user is on the page. This works great on the computer, but not so great on a phone. My theme is a responsive theme so it adjusts to a phone screen pretty nicely, and the menu tab is condensed to a single drop down button on the phone. However, when you open the dropdown, all my menu bar tabs drop down into the first post content and are very hard to see and click on. I'm thinking this is because of the sticky menu that I set up.
I also have two ads set up outside my main content area. These overlap with the content area on a mobile phone. I need to keep these ads either pushed to the bottom of the content area, or hidden, on mobile view.
My site is www.beeandcompany.com. I would so appreciate if anyone would be able to help me out!
Well, just edit the responsive css you have in your style.css. There is a line
#media screen and (max-width: 779px)
That will work on all resolutions smaller than 779px. There target your menu, and position it fixed to top left corner.
For instance
nav.lowermedia_add_sticky {
position: fixed;
top: 0;
left: 0;
background: #aaa;
z-index: 100;
}
You can edit it to your liking. Also you should make your menu toggle always visible. And those ads are overlapping your content. You should get someone to go through your design and fix stuff for responsive.
I'm using a jQuery UI accordion as a menu on the right side of a page. However, there are occasions where the menu will be taller than the content on the left. Because of this, when expanding/contracting sections of the accordion, the scrollbar on the browser can grow/shrink when opening a section of the accordion. My thought was to have a div below the accordion which is the height that the accordion could possibly get to, and when the accordion expands it would just overlap it, thus not changing the scrollbar on the browser at all (hope that makes sense). Giving it a position: absolute and declaring the height and width seems to screw up the layout, placing it overlapping the footer but bleeding below it. Anyone have any ideas on how to make this work? If you need a more detailed example, I'll see what I can do to provide it, however, the site is locked down and I can't give out a username/password.
Min-height is easy to implement in IE 6.
The oldest hack from Dustin Diaz:
selector {
min-height:500px;
height:auto!important;
height:500px;
}
Or with expressions:
selector {
height:expression( this.scrollHeight < 499 ? "500px" : "auto" );
}
In fact for IE 6 height is like min-height. Element will expand with the content in it, until there is overflow:hidden specified..
You can always apply rules for IE 6 only with "* html hack" or with Conditional Comments.
You probably have a container around the menu and the content right? You could add a css min-height to the container which would be equal to the tallest that the menu could be in height