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
}
Related
I am trying to build a dashboard menu where I am using a vertical navigation bar for navigation. The navigation bar fills 100% height when there is no content in the right side of the pane.
It works perfectly when I zoom-in or zoom-out but when there are contents on the right side of the page the navigation bar doesn't fill the 100% of the page when I zoom-in.
The code styling for the navigation bar is given here:
.sidebar{
position: absolute;
width: 250px;
height: 100%;
background-color: #535392;
display: table-cell;
}
The styling for the contents on the right side of the page is given here:
.PageContainer{
position: absolute;
margin-left: 280px;
margin-right: 30px;
margin-top: 70px;
top: 0;
left: 0;
bottom:0;
right:0;
}
This is because of the parent element properties
This is an easy fix , but the way of implementation of sidebar is not good enough i felt
Anyways , this is the issue :
In your code , Parent element height is not explicitly defined.That means , its height is depend on its children height (the height of the largest child will be taken)
Your sidebar height is in percentage(%) . Which depends on the other elements height
when you don't have other elements , it just takes your body's height.
But when you add some elements , then the hieght of your sidebar depends on those elements (in your case , pagecontainer)
Quick - FIX
.sidebar{bottom:0}
.sidebar{
position: absolute;
width: 250px;
height: 100%;
background-color: #535392;
display: table-cell;
bottom:0;
}
.PageContainer{
position: absolute;
margin-left: 280px;
margin-right: 30px;
margin-top: 70px;
top: 0;
left: 0;
bottom:0;
right:0;
}
<div>
<div class="sidebar">a</div>
<div class="PageContainer">dnfnsdf<div>
<div>
i want the name in the middle of the page to scroll up as i scroll down, i made the bottom div climb on top of the image with the fixed position but that somehow included the name and subtitle as well. i dont want that.
i have currently 2 container divs
and one div that got the texts inside it
here is the css code:
/thats the first fixed div with the image/
#intro {
display: 100%;
position: fixed;
z-index: -99;
background-image: url('images/la.jpeg');
top: 0;
height: 500px;
width: 100%;
}
/this second div is for the h1 and p
its a child of the intro div with the image. /
.infirst {
display: inline-block;
position: absolute;
margin: 250px 0 0 580px;
}
/and last is the div climbing up on top of both of them /
.about-me {
background-color: #000000;
width: auto;
height: 1000px;
position: relative;
z-index: 1000;
margin-top: 100%;
}
picture of the site
EDIT/UPDATE: 7th June 2019
I've determined this is a bug in Safari, as the CSS works perfectly in all other browser. For anyone who finds this, if you're creating a sliding menu (which slides offscreen to the right of the viewport), as of Safari 12.1.1, adding overflow-x to the body tag will not work (it does work on Chrome, Firefox etc) - this means that when your menu div is positioned offscreen to the right, the user can scroll horizontally and see the menu.
I've found a (sort of) workaround is to give the parent container of the menu dive a position:fixed attribute - this obviously only works if you intend for your header to be fixed.
Original Question
I'm building a simple header with a menu that slides from right to left when the menu button is pressed. However, when I position the menu div offscreen (left: 100%), on Safari, I can scroll horizontally right to see the menu div. (No scroll bars appear, but I can scroll right via the Mouse)
If I set overflow-x:hidden on the header, then it hides the offscreen div, but also won't show it if you set the left:0 (ie. overflow-x seems to be hiding x and y directions).
Even more perplexing, if I change the header to position:fixed, then it works and you can't scroll right to see the offscreen menu div.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
width: 100%;
padding: 10px;
background: #CCC;
position: relative;
}
.slideMenu {
position: absolute;
top: 100%;
left: 100%;
width: 100%;
padding: 10px;
background: #666;
}
<div class="header">
Header ---> Scroll to Right
<div class="slideMenu">
Menu is visible offscreen- :(
</div>
</div>
Here's an example of the problem: https://jsfiddle.net/ar7qyfgt/
I ran into a similar issue with Safari. Solution that appears to be working is to apply overflow-x: hidden; to the html AND body tags.
Adding to body resolved issue in all browsers expect Safari. Applying it to both seems to do the trick with Safari while still supporting the other browsers.
I have the same issue in my Safari(Version 12.1.1) when I set my div to position: absolute and right: -15rem;
To fix it, I added a to include all elements within and have the CSS like this:
.wrapper {
position: relative;
overflow-x: hidden;
}
Hope this help.
What you currently have works, you just need to set overflow-x:hidden on the body instead of the .header
What are you trying to accomplish? This?:
JSFiddle: (https://jsfiddle.net/pzeqfb51/)
HTML:
<div class="header">
Header ---> Scroll to Right
<div class="slideMenu">
Menu is visible offscreen- :(
</div>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
width: 100%;
padding: 10px;
background: #CCC;
position: relative;
}
.slideMenu {
position: absolute;
top: 100%;
left: 100%;
width: 100%;
padding: 10px;
background: #666;
}
div {
display:inline-block;
}
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'm trying to create a sample page with fixed header, fixed sidebar, and sticky footer. I would like the page to be responsive as well.
I have a fixed sidebar and I have a right border on it. I would like the border and the sidebar to stop right when the footer begins.
I have a working fiddle: https://jsfiddle.net/DTcHh/15278/
Here is the css I'm using for the sidebar
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background-color: #FFFFFF;
margin-top: 50px;
border-right: 1px solid red
}
You can use z-index so the footer sits on top the sidebar.
CSS
.footer {
z-index:1000;
}
#sidebar-wrapper {
z-index: 10;
}
Here's a working demo.
Use z-index
.footer {
z-index: 1000;
}
Here's a working fork
The simplest way is to make the footer also position: fixed; with a z-indexhigher than the sidebar
Fiddle: https://jsfiddle.net/ue49tzet/