I have logo picture in top of Web page.
After logo-> navigation bar.
after scroll down logo, how to make fixed navigation bar only. sorry for my English.
I cant really see what your problem is maybe you cold post a screenshot or something... But just try postion: fixed; in css maybe this will help!
In order to make an element fixed use position fixed as follow:
.nav{
position: fixed;
left:0;
top:0;
width:100%;
}
if you have overlay problems use z-index property
use nav{position: fixed;} in the head. Do post your code if you have further issues.
Related
Hi there I am having trouble with a horizontal scroll bar appearing on my site, I have no idea why it is appearing. It only showed up when I was playing around with the footer however even after removing the footer it was still there.
The site I am working on is http://tritorial.com.au any help would be appreciated thank you.
Just add this in your css
body {
overflow-x: hidden;
}
if you are using w3css, make sure the width is 100% including the margins and padding
try adding clear:both; and overflow:hidden; to some items in your css.
I am trying to create a header which remains fixed at top but what happens is when i scroll down the page the header moves along with it while maintaining its position.
My requirement is that the header shouldn't move with the page as we scroll down.
JS FIDDLE:https://jsfiddle.net/qa5d1ry0/
Note: Its just a dummy code of my layout and i have added random text in order to get the code working
Note: I have tried using position:absolute for header but the problem is that header don't get displayed as we scroll
Try to give position: fixed; to the header and remove the relative position from container.
.header {
position: fixed;
}
Try to add top:0px; after your position:fixed; for the header/heading div.
It's fixed for me. Try position: fixed. What browser are you using?
I am having an issue getting my fixed position navigation menu to overlap my text, a example of this is: http://www.saveur.com/michel-roux-scrambled-eggs-with-asparagus-and-crab-recipe
With the code I have currently managed the fixed position navigation appears behind the text, but I want it to be at the top and overlapping at all times, just like the website above.
All of the content is fixed position, I have made this so that if any one could help me they could just edit the code easier.
HTML: http://pastebin.com/j7jHjb4h
CSS: http://pastebin.com/sWuLChut
How can I make it so that the navigation menu stays at the top even when scrolling down just like the website above.
Just add a z-index value to the fixed element:
z-index:100;
If larger than any other z-index on the same level, it will overlap everything as needed.
#navMenu {
margin:0;
width:200px;
height: 1px;
z-index: 1000;
}
You could try to give it a high z-index
I wanted to build a website from scratch, I started adding nav bar which seems to work fine and after that I added a few div tags as "fixed".
I need it to be in such a way that when I scroll the nav bar should be fixed and the rest of the content to be scrolled...
I have attached the project below
From what you are describing I think I have a solution.
In your nav bar you need to put <nav style="position: fixed; top: 0;">CONTENT</nav>
This will make it never move and be stuck at the top bottom: 0; will make it stick on the bottom
Update:
Change your code to this:
<section class="color-1">
<nav style="position: fixed; top: 0;">
Ailurophile
Sumptuous
Scintilla
Propinquity
Harbinger
</nav>
</section>
I think i have a solution for your problem.
In your project #navber element overlap the section element when you going to set position:fixed .Now if you set any positive value of z-index for section, then it overlaps navbar element
You just have to set one property...
section{
position:fixed;
z-index:1;
}
Fixed elements are those elements which removed from the flow of document.
Without any z-index value elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top).
but now section element overlaps navbar.set property for navbar as follow
#navbar{
margin-top:50px;
}
I have a horizontal fixed header on top of my site and when I use page navigation to scroll to an ID, it puts the content I'm trying to scroll to underneath the header.
Is there a way I can offset where the page navigation shows up by 80 pixels (down)?
Edit: I was actually able to fix it myself in the simplest and most acceptable manner possible. I put the solution in an answer below.
Well, since no one else had an answer, I fixed it myself.
Here is the fix:
JSFiddle
This was done by making a hidden div that is absolutely positoned 'x' amount of pixlels above the content I want to scroll to. I then scroll to that div instead of the content I originally wanted to scroll to. 'x' should be the height of your header, this way the content you want to scroll to appears directly below your header like it should.
You can do that with CSS.
HTML:
<header>Your Header Here</header>
<div id=main>Rest of Content</header>
CSS:
header { position: fixed; height: 80px; }
#main { margin-top: 80px; }
Try reading this artcle from Chris Coyier. He cleverly uses a pseudo-element to solve the "fixed header in page navigation" issue. Take a look: http://css-tricks.com/hash-tag-links-padding/.
The example doesn't show how it works. I fixed it by adding:
#header {
opacity:0.5;
}
#content-scroller {
height:120px;
}