I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:
http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar
You can scroll down or up in the content, but the navigation bar never goes away.
For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.
Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
}
#navigation li
{
display: inline-block;
width: 150px;
height: 110px;
cursor: pointer;
}
And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:
#container
{
position: absolute;
margin-top: 180px;
font-size: 25px;
width: 90%;
}
The reason it's going through is because you didn't set a background color to your navigation bar. Try that.
Edit: Looked at your source code. Replace navigation CSS in style.css file with this:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
background-color: #FFFFFF;
z-index:999;
}
The problem was the z-index. Putting it at 999 puts the navigation bar on top of all other elements.
You can use the property z-index:xxx, did you try that?
Years ago created my site with that same functionality. I opted for Server Side Includes and it works great. I created a 'header' the navigation links and a 'footer' that gets included on each page.
Have you tried to add data-role="header" ?
<div data-role="header" data-position="fixed">
Related
I'm trying to make a short pop up in my web app for when a user clicks on a code to copy it. The trouble I'm having is trying to figure out to make it not shift everything in the parent div.
The gif below is what currently happens after all my attempts and googling of trying to solve this problem. What I'm trying to get to happen is have that copied message bubble just appear to the top right of the span with the room code.
This fiddle is a stripped down version of the interaction. I've tried all the different display and positionings and I'm not really sure where to go from here. Thanks in advance to everyone.
https://jsfiddle.net/k6ey1duc/36/
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.text {
display: inline;
}
.pop-up {
display: none;
background-color: #fe0c0d;
}
#show-hide {
display: block;
margin: auto;
}
<body>
<script>
$(document).ready(function() {
var x = false;
$('#show-hide').on('click', function() {
if (!x) {
$("#pop-up").css({
"backgroundColor": "#fe0c0d",
"display": "inline"
});
x = true;
} else {
$("#pop-up").hide();
x = false;
}
});
});
</script>
<div class='container'>
<p class='text'>
Hello there! <span>Here is a span.</span>
</p>
<div id='pop-up' class='pop-up'>
Here is a pop-up
</div>
<button id='show-hide'>
Click for pop up
</button>
</div>
</body>
Adding position: absolute; to .pop-up will prevent the container from making any space for the element which is what you are trying to prevent. Additionally, adding position: relative; to .container will give you freedom to position .pop-up anywhere relative to the container.
Another solution is replacing the display: none; display: inline; with visibility: visible; visibility: hidden;. The main difference between these two is that display will remove the entire element from the layout whereas visibility will only hide the element but retain the elements space. This will solve the resizing container problem but will not give you the advantages of stacking and positioning that position: absolute does.
.container {
position: relative;
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px
}
.pop-up {
position: absolute;
display: none;
background-color: #fe0c0d;
}
Use position:relative and postion:absolute.
.container {
background-color: #008afa;
width: fit-content;
margin: auto;
padding: 20px;
position: relative;
}
.pop-up {
display: none;
background-color: #fe0c0d;
position: absolute;
left:100%;
width:inherit;
}
Here's what happens when unfixed and it's the behaviour I want but I want navbar to be fixed
Here's what happens when fixed: it doesn't move the content (it is behind this dropdown)
// scss for the nav
.filterbar {
position: fixed;
top: 0;
box-shadow: 0 0 15px black;
width: 100%;
// for info section
.filters-info {
margin-top: 110px;
display: flex;
justify-content: space-between;
}
How to fix this? (margin-bottom didn't help). I have two ideas: 1. to get toggleFilterbar prop and to change the styling based on this 2. to make the nav position absolute and then to change it to fixed. However, I guess there must be a simplier css way to fix this
Give position:relative; to .filters-info
and
Replace margin-top: 110px; to top: 110px;
So I have a vertical page divider that is used multiple times on a page, it is a div within a div, on the page scroll, I would like the inner div to scroll with the page and then stop when it reaches the end of the parent div.
Any ideas?
Simple HTML
<div class="verticalscroll">
<div class="verticalscroll_bar"></div>
</div>
CSS
.verticalscroll {
width: 3px;
height: 335px;
background: #D8D8D8;
margin: 80px auto 0;
}
.verticalscroll_bar {
width: 3px;
height: 100px;
background: pink;
}
I appreciate the help!
Fixed it... simple really!
Adding this CSS to .verticalscroll_bar
top: 200px;
position: -webkit-sticky;
position: sticky;
I try to have a sticky navbar with a dropdown-menu.
But the dropdown-menu is not showing.
I player around with this for too long now i guess.. and the biggest problem: in jsfiddle the dropdown-menu is now showing at all. However at my pc the dropdown-menu is showing as long as the 'sticky' class is not added, then becomes invisible, too.
Here in stackoverflow I read about overflow:hidden in the navbar causing the problem. Deleting that makes the dropdown-menu work but the navbar disappears.
-> dropdown-menu invisible
https://imgur.com/JYcswYq
-> navbar not shown
https://imgur.com/Gk5P6gN
I assume the error somewhere here but couldnt figure it out..
#navbar{
overflow: hidden;
font-size: 25px;
background-color: #333333;
}
main{
padding-top: 30px;
padding-bottom: 30px;
}
.dropdown-content {
right:0;
display: none;
position: absolute;
background-color: #333333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 48px;
}
There you can find a reduced part of my code. Here the dropdown doesnt show at all. (at my pc it at least shows as long as the sticky-class isnt added)
https://jsfiddle.net/xncjazky/3/
Hopefully i can get any advice on how to make the dropdown-menu popup even with the sticky-navbar.
Thank you.
Remove the overflow:hidden as you found out yourself, and add a height or min-height property to the #navbar selector, like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
min-height: 48px;
}
The problem occurs because of the use of floats in your navigation items.
So another way to solve the issue without setting a fixed height to the #navbar, is changing your navigation items from float:left to display:inline-block.
Like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
}
.lnav{
//float: left;
//display: block;
display: inline-block;
padding: 10px;
text-align: center;
color: #d9d9d9;
text-decoration: none;
cursor: pointer;
}
Hope this helps.
Cheers, Jeroen.
I had the same problem and solved it by placing the navbar inside the "div" element with "position: sticky".
For example:
<div style="top: 0; position: -webkit-sticky; position: sticky">
<nav>
<!-- here goes the code of navbar -->
</nav>
</div>
Removing overflow: hidden; will cause the background color of the main navbar to disappear if you have the li elements set to float: left; or float: right;.
I managed to fix the issue of content not appearing by making the .dropdown-content div class position: sticky; with the ul.topnav element. Problem is, a new glitch arises as the dropdown list appears with the background color assigned to it, acting as it should, except for one thing. The background color of the topnav list comes down around the dropdown, making the whole list fatter instead of showing a simple lonely dropdown menu.
CSS
#acc-close-all, #to-top {
position: relative;
left: 951px;
width: 29px;
height: 42px;
margin-bottom: 2px;
display:none;
}
#acc-close-all a, #to-top a {
position: absolute;
float: right;
display: block;
height: 42px;
width: 29px;
overflow: hidden;
display:none;
cursor: pointer;
}
HTML
<div id="acc-close-all">
<a title="Close all open tabs"><!----></a>
</div>
<div id="to-top">
<a title="Back to top"><!----></a>
</div>
jQuery
// Scroll close all and bcak to top buttons with the page
$(window).scroll(function() {
var top = $(this).scrollTop();
$('#acc-close-all a, #to-top a').css('top', top + "px").css("display", "inline");
});
I would like these tabs to fadeIn slowly when the user scrolls down the page and fade up when the user is near the top.
I can get it to work without the display:none and display:inline but it just doesn't show up when the user scrolls down the page. I've read this http://api.jquery.com/scroll/ but still can't get it to work.
NB: The page is only scrollable when the accordion is opened. Yes more than one accordion can be opened at any one time.
The reason you're not seeing your links appear onscroll is because their parent containers (#acc-close-all and #to-top) are also set to display: none and never set visible on scroll. You can change the CSS as follows to fix the issue:
#acc-close-all, #to-top {
position: relative;
left: 951px;
width: 29px;
height: 42px;
margin-bottom: 2px;
}
Alternatively you could set both parent containers to display: block in your scroll event handler.
Here's a simplified example with it working.