I have a navigation menu on my site which will transition to a full-screen slide-out menu whenever the user uses the site on a mobile device via media queries. However if the screen height is vertically too small to display the contents of the menu (e.g. wearables) I'd like the menu to have its own scrollbar.
Problem: The menu fits itself to the screen with a fixed position that is 0 pixels from all sides. However, even if I have a minimum height and an overflow: visible|auto property assigned to the menu, it still never shows its own scrollbar. Only the body one shows.
Example: http://jsfiddle.net/spryno724/fbhh15fo/ Try resizing the frame of the preview area to see what I mean.
Question: Anyone know how to get the menu to show its own scrollbar, if the screen height is too small. Again this menu has a fixed position which is 0 pixels from all sides.
This will make the menu max out at the viewport height.
Add
max-height: 100vh;
to the ul css section
ul {
/* Lots of declarations */
max-height: 100vh;
}
(Demo)
You need to change min-height to max-height in ul :
Before Change:
ul {
background: #191919;
bottom: 0;
color: #EDEDED;
left: 0;
margin: 0;
**min-height: 150px;**
padding: 0;
position: fixed;
overflow: auto;
right: 0;
top: 0;
}
After Change :
ul {
background: #191919;
bottom: 0;
color: #EDEDED;
left: 0;
margin: 0;
**max-height: 150px;**
padding: 0;
position: fixed;
overflow: auto;
right: 0;
top: 0;
}
JSFIDDLE DEMO
It turns out that by adding a media query, and specifying the height of the menu to 100% worked!
#media screen and (max-height: 380px) {
ul.nav {
min-height: 100%;
overflow: auto;
}
}
Related
Using Angular I have a horizontal navigation bar that I need to be fixed such that if I am scrolling up and down in the viewport the bar stays fixed at the bottom of the screen.
Here is the CSS code I have for the bottom navigation bar element:
.bottom-bar {
position: fixed;
background-color: white;
overflow: hidden;
z-index: 1;
height: 65px;
top: 90%;
width: 90%;
}
The navigation bar behaves as desired, but I manually have to adjust the top and width properties to get the element to fit perfectly on the page. Of course that doesn't work when the resolution/screen size for the viewer changes and the element doesn't fit perfectly. See below for an example of trying to fit the element onto the page:
Is there a way to change the CSS to make the navigation bar fit perfectly on the page and also stay fixed? I can get the positioning to work fine if I change the position to absolute or sticky, but then it doesn't stay in one place when I scroll up or down on the viewport.
Any help is appreciated, thanks.
Does referencing from bottom work instead of top?
.bottom-bar {
position: fixed;
background-color: white;
overflow: hidden;
z-index: 1;
height: 65px;
bottom: 10px;
width: 90%;
}
This should work:
.bottom-bar{
position: fixed;
background-color: white;
overflow: hidden;
z-index: 1;
height: 65px;
position: fixed;
bottom: 0;
width: 100%; // adjust the percentage if needed
}
Update: the page URL is https://nuclearterrortoday.org/test/pledge.php - if you inspect on mobile, you'll notice the navbar doesn't take the full width of the page, though inspector says the width is 100vw
Stylesheets (in cascading order - some elements may be overridden in forms.css):
https://nuclearterrortoday.org/test/style.css
https://nuclearterrortoday.org/test/forms.css
I have a website with a nav bar that's standard across the site. On one page, the nav bar only covers approximately 90% of the width of the screen, leaving a gap on the right side. There's an additional stylesheet styling the affected page, but nothing affecting any nav elements or the page itself (ie changing the body's width). Resetting HTML, body, topnav, and .pledge-bg (custom body class) has no effect.
That said when using js to change the display of a child element of .topnav for the mobile menu, the width of .topnav changes to the width of the screen as intended.
On every other page, .topnav takes 100% of the screen width. The HTML structure where the header is included is identical.
CSS:
/*left:0 and right: 0 per #Magnus Eriksson*/
var myLinks = document.getElementById("myLinks");
if (myLinks.style.display !== "block") {
myLinks.style.display = "block";
} else if (myLinks.style.display == "block") {
myLinks.style.display = "none";
}
html {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
body {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
.topnav {
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100%;
width: 100vw;
height: 10%;
height: 10vh;
background-color: rgba(169, 169, 169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}
#topnav {
left: 0;
right: 0;
width: 100%;
width: 100vw;
}
.topnav #myLinks {
left: 0;
right: 0;
z-index: 999;
display: none;
height: 100%;
height: 100vh;
width: 100%;
width: 100vw;
z-index: 11;
background-color: rgba(148, 181, 201, 0.9);
color: white;
}
.pledge-bg {
left: 0;
right: 0;
background: url(img/ocean-nuke.jpg) no-repeat center center fixed;
background-color: rgba(0, 0, 0, 0.5);
z-index: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
width: 100vw;
}
<script src="https://nuclearterrortoday.org/test/swap.js"></script>
<body>
<!-- <?php include "../../inc/header.php" ?>
-->
<!-- Top Navigation Menu (header.php:)-->
<div class="topnav" id="topnav">
<div id="myLinks">
menu
</div>
</div>
<div class="main">
<div class="main-header">
<h1 id="vision">Miracles Have Been Created in The Past</h1>
<p id="main1">10/10/1963 - We no longer test nukes in the ocean or atmosphere!</p>
<img onclick="animateSlide('left')" class="control" id="lControl" src="img/leftArrow.png">
<img onclick="animateSlide('right') " class="control" id="rControl" src="img/rightArrow.png">
</div>
</div>
</body>
Instead of using width: 100vw on #topnav just use width: 100%. Also if you define two values for one property the last one will override the first one so don't do that.
Remove width: 100vw and width: 100% from .topnav as id topnav already got the precedence over class topnav so width applied on .topnav will never apply.
Also, remove all the styling from the body. left and right will not work on body tag as it's position is static. Also, body by default take 100% width you just need to remove default margin which browser applies on the body tag:
body {
margin: 0;
}
Also, remove all the styling from HTML tag reason is same I mentioned for body tag above.
The right arrow for your image slideshow is causing the position of your nav menu to be thrown out. The right arrow is currently coded to display at -5% on an iphone screen) and it is the css includes position:absolute. There is currently no media query to handle resize for devices under iPad size, so on mobile phones, the main div, containing the slideshow + arrows, is impacting the nav menu; this is causing the a negative 'shift'.
The issue could most likely be resolved by moving the div containing the arrows further down on mobile devices using media queries.
Hope this helps
Actually this problem is because of the element with the class .top-bar.
Since your .topnav is having
.topnav {
position: fixed;
}
You need to give some position style to your .top-bar and that can be
.top-bar {
position: fixed;
}
OR
.top-bar {
position: absolute;
}
And then you can handle the display property for your text which I think is the Heading or Logo of the website.
Here is the screenshot of my modifications.
screenshot with the required changes
I hope this will help you with your problem.
To use width, you need to make the element block or inline-block For example:
.topnav {
display: inline-block !important;
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100vw !important;
height: 10%;
height: 10vh;
background-color: rgba(169,169,169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}
You can fixed in two way first way is trick way and second way is right way.
First way,
Remove width: 100vw; from #topnav and .topnav.
Second way,
Your navbar is fine and working correctly.But your some element's
are wrong.When you use vw for width.You should careful.Your all
elements total width must be maximum 100%.I mean total width is
"width + left + right".You should check and recalculate for total width for every
width.
Solution for second way::
.main-header{
min-width: 95%;
}
.form{
width:95%;
}
On the page with the navigation bar error where there is a big gap
add some inline style with the <style> tag inside the 2 <head> tags
and try margin-top: -150px;
If it works but not enough increase the negative amount of pixels.
This is not enough information to debug this issue. The code you provided works fine in a Codepen (topnav is full width). There is some additional stylesheet or markup affecting your layout, and without that, this question cannot be answered.
The only thing I noticed is topnav does not have a left: 0; style, resulting in a small whitespace on the left side, but I am not sure if that is the issue you are referring to as it is much smaller than a 10% gap.
I'm trying to achieve an example as shown on this site. Click on the "Projects" button on the top right corner below the main menu to reveal the container I am interested in replicating.
When stretching the webpage from left to right and top to bottom, that project pop up is responsive and the padding around the page keeps the same value. I was able to get my width responsive but cannot figure out how to get the same thing for my height since I don't have a specific value for my height. I want the box in my site to be responsive on bigger computer screens than what I am using right now (15" macbook pro) because right now it only takes up half the screen on a bigger monitor.
Here's my code:
nav {
/* max-width: 1266px; */
width: 87.92%;
margin: 50px auto 23px auto;
height: 40px;
background-color: pink;
}
.content {
/* width: 1266px; */
width: 87.92%;
height: 540px;
margin: 0px auto 0px auto;
background-color: aquamarine;
}
<nav>
</nav>
<div class="content">
</div>
Try here.
I want there to have 50px padding at the top and bottom of the webpage even as you shrink the page top to bottom. Right now my nav has a margin-top of 50px, but ideally, I'd like the entire page to have a padding of 50px at the top and bottom. I just don't know how to go about this and I can't seem to find an answer anywhere!
Thank you!!
You can use calc() for this:
height: calc(100vh - 163px);
100vh = total height of screen
163px = 113px + 50px
(113px is the height of your nav with margins and 50px is the distance to the page bottom)
There are several ways to do. One way is to use fixed or absolute positioning. The page http://kokopako.fr/profile fixes the position. Notice that the body in that page no longer scrolls when the Projects menu is open. This is something you need to enable using JavaScript.
So, imagine originally the body is tall and only the navigation is visible at the top:
body {
height: 1900px;
}
nav {
height: 40px;
background-color: pink;
width: 87.92%;
margin: 50px auto 23px auto;
}
.content {
background-color: aquamarine;
display: none;
}
Then when you click no "Projects" button, you would add an extra class, say projects_visible to body so that it doesn't scroll.
.projects_visible {
overflow: hidden;
}
Then the navigation and the content would display automatically with fixed position.
.projects_visible nav {
position: absolute;
top: 50px;
right: 50px;
left: 50px;
margin: 0;
}
.projects_visible .content {
display: block;
position: absolute;
bottom: 50px;
top: 123px;
right: 50px;
left: 50px;
}
I have a pop up dialog with a list of items in it. I am trying to give the list of items a max-height relative to the overall height of the screen.
After some fiddling with the styles, it seems to me like it doesn't work when pop up dialog have max-height because it creates a cycle in the computation: The popup dialog's height depends on the height on the list of items, and the list of items max-height's depends on the popup dialog's height.
Please see the attached plunkr for an example: when #popup-container has max-height of 66%, the list of items (popup-content) has no max-height.
http://plnkr.co/edit/esdIMjvOgJ8hRM8mSk2t?p=preview
this seems to do the trick:
Entire CSS page:
/* Styles go here */
* {
box-sizing: border-box;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#popup-container {
position:fixed;
max-height: 66%;
border: 1px solid black;
width: 500px;
bottom: 0;
right: 0;
overflow: auto;
}
.popup-footer , .popup-header {
display: block;
background: #ccc;
height: 20px;
position: fixed;
width: 480px;
}
.popup-footer{
position: fixed;
bottom: 0;
}
The footer is a bit hacky though... i'm not sure yet how to work around that one.
I gave the header/footer a width so it doesnt go over the scrollbar :S
I have found this vertical centring method which seems pretty common..
#container {
width: 960px;
height: 740px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -370px;
}
What I'm trying to center here is the entire site, and this code goes perfectly as expected when the screen preview is larger than the div height (larger than 740px). However, Once the browser window is minimized less than div's vertical size (740px) parts of the header disappear above the top of the page.
I can sort of understand why this is happening seeing that 50% becomes less than half the div's size which will be equalized with margin-top.
What I'm looking for is a fix for this issue? Or even a completely different method, I just need to center the site both vertically and horizontally.
try this:
#container {
height: 740px;
width: 960px;
position: absolute;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
}
By the way, Smashing Magazine recently published a nice article about this.
You need to add a media query:
#media screen and (min-height:740px) {
#container {
top:0;
margin-top:0;
}
}
This will only apply the formatting where the screen is at least 740px tall. If you want to learn more about media queries, check http://www.w3.org/TR/css3-mediaqueries/
Absolute Centering like Lino Rosa mentioned is the best approach here for easy horizontal and vertical centering while allowing you to add some responsive touches, like fixing your height issue.
Ideally, you should be using percentages for the width and height declarations so that your content will vary with the viewport. Of course, sometimes you just need pixels :-)
Here's what I've done:
.Absolute-Center {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#container {
width: 960px;
max-width: 90%;
height: 740px;
max-height: 90%;
overflow: auto;
}
By setting a max-height and max-width, the box will never be more than 90% of the container (in this case, the browser viewport) even if it's less than 960px wide or 740px tall, so even small screens see a nice centered box. overflow: auto ensures that if the content is longer than the box, the user can scroll in the box to see the rest.
View the demo
If you must have the box exactly 960px by 740px no matter the screen size (forcing the user to scroll around to see all of the content on a small window), then only apply the Absolute Centering styles to #container using a media query, like so:
#container {
width: 960px;
height: 740px;
overflow: auto;
margin: auto;
}
#media screen and (min-height:740px) and (min-width: 960px) {
#container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
}
View the demo
I encountered the same issue. As the height of my element is dynamically changed, I can't give it a fixed height.
Here is a demo below, hope it helps.
.wrapper {
display: table;
height: 100vh;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
background-color: lightblue;
}
.content {
width: 30%;
height: 30%;
background-color: red;
}
<html>
</html>
<body>
<div class="wrapper">
<div id="container">
<div class="content">
</div>
</div>
</div>
</body>