I'm attempting to make this hamburger menu (visible when the page width is less than 865px) scroll to show whatever overflows the VH on screens not tall enough to display the whole menu at once. From my understanding by setting a fixed height to the dropdown section itself, something like calc(100vh - *header-strip-height*) combined with overflow-y: scroll; applied to #header_menus should work, however, because the #header_menus div is a child element of the top strip, and the top strip has a defined height, setting overflow-y: scroll; seems to force the dropdown segment to only take up the VH of the strip menu, and scrolls within the confines of the strip menu, instead of taking up the entire right side of the site, of all the solutions I've tried, I have yet to arrive at something that does not interfere with the placement of the body relative to the header, which is represented in the codepen by a placekitten image.
Looking for suggestions on how to allow the dropdown hamburger menu to scroll when it vertically overflows, without breaking the header layout in a way that interferes with the body in any way, ideas?
https://codepen.io/roomwillow/pen/BaWQoVJ
The issue caused by the fixed height set on your navigation.
In order to handle this you can set an absolute position on the menu,
when the viewport is under 865px.
As such:
#header_menus {
background-color: black;
padding-right: 1rem;
padding-left: 2rem;
overflow: auto;
position: absolute;
height: calc(100vh - 5.5rem);
top: 5.5rem;
right: 0;
}
Do make sure to add relative to the parent so it doesn't mess up the page:
#header_right_section {
position: relative;
}
This will make it work.
https://jsfiddle.net/5zjw1b6h/
Related
This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.
Code: https://jsfiddle.net/gsnfzn35/3/
It's a bit funky to describe, click the toggle drawer button. A pull out drawer on the right shows up. That pull out drawer is one container, but has 2 key components. The first component is all the content at the top. The last component is a "fixed row" on the bottom:
<div class="scroll-fixed-row" style="width:100%;text-align: right">
<p>
FIXED FINAL ROW
</p>
</div>
This row SHOULD be the width of the pull out drawer, whatever that width is; NOT the width of the screen. Currently though, if you inspect element with the width:100%, you see that the width is the width of the screen, not the pull out drawer. Another way to see this is in the fact that when there's width:100%;text-align:right, the text is off screen, pulled to the right of the row that is too wide. Remove the width:100% and you can see the text again.
I'm guessing this is due to the fact that the scroll-fixed-row is fixed, and therefore, its taking width from the screen, not the pull out drawer itself. But this fixed is necessary, because that scroll-fixed-row needs to stay at the bottom even though the rest of the pull out drawer scrolls. Given that constraint, how can I set the width of the scroll-fixed-row to be the width of the pull out drawer, for any screen (full responsiveness) WITHOUT having to provide specific width in pixels based on media queries?
The reason I'm asking this is because I would like to divide the scroll-fixed-row into 2 "sections" using either a table and 2 <td width="50%"> or using Bootstrap grid and 2 <div class="col-xs-6"> in a row. In the current implementation (NOT in the Fiddle), the content in the 2nd grid just gets pushed off page (same issue now) because the table width is inheriting from the screen. I think I can figure that part out if someone can help me answer this question.
The width can be solved by using inherit instead of 100%, this will make a fixed element get the width of its parent, in your case .container.scroll. I noticed that you have padding added to parent, the inherited width will include paddings and so the fixed element will overlay the scrollbars.
Code:
.scroll-fixed-row {
position: fixed;
text-align: right;
background-color: white;
border-top: 1px solid black;
width: inherit; /* get width from parent */
bottom: 0; /* stick to bottom */
right: 0; /* fix offset caused by padding */
}
Another thing I noticed that in your code is that you are using margin-top: 70px on .scroll to offset it from the fixed red nav, this causes the the bottom part that is out of viewport to be invisible, especially the bottom scroll arrow. I've changed it to the following:
.scroll {
position: fixed;
top: 70px; /* offset from top (nav height) */
height: calc(100% - 70px); /* calculate height minus the top offset */
}
If you wanted to prevent the fixed element from overlapping the scrollbars, you could apply pointer-events: none and add another wrapper in the HTML that gets a 15px spacing like the content, for better consistency:
.scroll-fixed-row {
...
pointer-events:none; /* disables mouse functionality to enable scrollbar control */
}
.scroll-fixed-row .inner {
border-top:2px solid red;
background:lightblue;
margin:0 30px 0 15px;
pointer-events:auto; /* allows mouse functionality */
}
jsFiddle demo - scrollbar overlap: https://jsfiddle.net/azizn/guufj4a0/
jsFiddle demo - additional wrapper: https://jsfiddle.net/azizn/d6wwk51b/
I need a vertical navigation that will stretch the entire screen. How can I do this?
Typically, I would set the navigation with:
position: absolute;
height: 100%;
overflow-y: hidden;
but I can't get this to work for me for some reason or another. It shows a scroll bar regardless, and doesn't stretch the entire page--only the height of one viewport. You can view a working example here:
http://solstaging.net/vhosts/dealer-world-delivery/
Add position: relative to your body tag and the #primary will be the full height.
I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}
I am creating a page that has a background image and the content is within a centered container that runs vertically down the page. Similar to the Yahoo! Answers layout: http://uk.answers.yahoo.com/
If you minimise your browser while on Yahoo! Answers the vertical scrolling just becomes 'longer' and the content all stays on the white container.
However, on mine when I minimise my browser the content towards the bottom of the container overflows and appears on the background image instead. I want the container to expand..
I do not want to use the overflow:auto or any other overflow attributes and I don't like the scroll bars.
Please see below and thank you in advance:
body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}
#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%;
opacity: .7;
filter:alpha(opacity=70);
)
Just remove the value height: 100% from #container. This is setting the max height of your container to the same height as the browser window, preventing anything longer than the window from being displayed.
I'm guessing that you added this property so that the entire background will display on the page when there is little page content. To get the effect you're looking for you may have to create a separate div, in a fixed position, and positioned center, with a z index smaller than your main #container.