Mobile Header Dropdown Not Full-Width - wordpress

I am using Elementor Pro, and I have a mobile dropdown header, but it is not always stretching full width. Sometimes when it is viewed it will dropdown from the hamburger to the left of the screen, like there is padding.Dropdown to the left. This is the current site: https://nurturdev.wpengine.com/
I was expecting it to go full width and I have checked that this option is selected.

Related

Flyout menu - can scroll to bottom to show entire menu

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;
}

Menu icon is appearing UNDER the logo - want it aligned to the right

On this page: http://diablogym.net/
When you use a mobile device like a tablet or cell phone the logo covers the menu icon button. I want that icon to appear on the right - logo on the left. I can't figure out how to do that. Can anyone supply the css to fix that?
thanks!
The styles on this site seem very messy...
In order to fix it I removed the float, position, width and height from '.nicdark_logo' (why is the height set to 10px?). I also took the position: absolute; off of '.nicdark_logo img'. This makes the logo appear above the menu.
Beyond these changes, I would suggest centering the logo and scaling it down a bit so your sticky header isn't taking up so much of the page.

Fixed DIV won't scroll in mobile but will in minimized desktop view?

I'm using Bootstrap w/ Jansy Bootstrap.
I have a fixed div on desktop. When I shorten my desktop browser the scroll bar appears on the left sidebar and I can scroll down to see the content below the viewport.
When I view it on mobile though, there is no scroll action.
How can I have scroll-action on a desktop shortened to 320px wide but none on an iPhone?
My page is here: http://thebigcheezy.apps-1and1.com/home2

Menu Mobile Fixed Zoom, meta or css?

tl:dr; I can't zoom freely on a mobile device throughout each page on http://lillhammarandfriends.com/
I am using an iPhone5.
While on the homepage, I try to zoom into the center of the menu, but it will only let me zoom into the top left of the page. The menu is only at the bottom on the homepage.
The Menu is at the top on all other interior pages like http://lillhammarandfriends.com/brand.html and it still is only zooms into the top left, any solutions to this problem stackOVO?!

CSS: How to fix one panel and scroll the other?

I have a web page with two panels. The left panel takes up the majority of of the width and displays user posts. The right panel is a navigation menu so I want it to remain fixed and never roll off the screen.
When there are too many posts to fit on one screen, a scroll bar appears on the right of the screen (NOT the panel), and the user scrolls down. This is all good, except that the navigation menu scrolls off the screen.
Both panels are within a common div. I tried setting its position to relative, then making the nav panel position fixed, with a right offset of 0. This kept the nav panel on the screen, but on the far right (ie. not within the containing div).
How do I go about keeping the nav panel fixed on the screen, but floated to the right of it's containing div?
Thanks a million!
EDIT: For and example of what I mean, look at Facebook. You'll see that the posts column can extend on forever, but the right hand column (with the advertisements) stays on the screen...
You could use the Twitter Bootstrap Affix JS plugin:
http://twitter.github.io/bootstrap/javascript.html#affix

Resources