I'm trying to make an a bit transparent navbar that is fixed to the top of the website. However, no matter what I try, when I scroll down the text doesn't stop before the navbar but continues behind it. I tried adding padding or margin to the body, or to the text itself, but when I scroll it still goes behind the navbar. Any idea how I can fix this behavior? I want it to stop right before the navbar, but I still wanna see a picture, which is supposed to be a static background, behind the navbar
I tried adding margin or padding to the body or the text field itself, but after scrolling down it still was visible behind the navbar. I also tried positioning it in absolute way, but it still didn't work.
Related
I cant seem to figure out how to edit the style sheet in order to get 20px more of white space under the health forge image without moving the category link button. Here is the page. https://www.healthyforge.com/
I tried adding margin to the main-content class but that doesnt give me the white color, it just moves everything down like i want but adds a gray bar of color into the margin spacing.
EDIT: I have sticky nav plugin turned off right now. but with it turned on, when i scroll the nav bar sticks and is as skinny as the image height. So I dont think I can add anything to the image or Header element.
I'm trying to create a fixed navigation bar with buttons(aligned left) and a title(aligned right). Before i fixed the position to the top of the page, it works as intended (other than not moving when scrolling, obviously). However, when i fix the position of the header, it moves my title over to the left with the buttons. How can I fix this? I've tried to make it into a div inside of the header tag and position:absolute the div; didn't work.
Here is what my page looks like
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">
It seems I'm having an issue with a design I'm working on. I'm using the kickstart HTML framework but I have a couple issues.
Firstly is that there is a very large white gap between the top of my page (logo, navbar) and the text.
Secondly I've tried to overlay the logo over the the navbar by using z-index. However it causes a negative horizontal scroll. I've tried to hide it by hiding overflow-x but it just doesn't seem like the best solution.
You can see the issues at http://jkr.me.uk/problem.html
Thanks,
John
Using position: relative on the logo makes it take up space that you're refferring to.
Instead, use float: right, or position it with position: absolute;
The issue with the white gap is the image. If you disable the position:relative property the image bottom will be touching the top margin of the fist header tag. A dirty fix for this would be something like margin-top: -200px on the first header or alternatively margin-bottom: -200px on the logo image. You could also use the method from the previous answerer.
As for the logo image overlaying the navbar, it does for me in both Chrome and IE 9.
Right now im using one large centered image in my body tag.
First image is basically what the front page is going to be like. Looks great.
Second image has some content and pushes down the footer and the whole page. But still looks fine.
This last image has a lot of content and pushes everything down, even past the height of the body background image.
So my idea is too split up the background at the change of colour you see in the first image, where the footer starts, and add that as a background for the Footer DIV.
But the issue is that that part of the background goes on past the browser in the first image. If I were to put the BG in my footer DIV it would have to be 500px in height, resulting in scrollbars.
Essentially I want to put the the lower part of the background in my Footer DIV and have it act like the BODY, in that it won't create scrollbars.
I think that was clearer than my previous explanation? It's hard to explain!
So in the first screenshot the background is one big image?
Yes, you need to split the background up.
Now lets assume these things:
1.) You've set the background color of the body to black (and that black bar that is showing is the body background and not a part of the image.)
2.) You have split the image up so the bottom half is the background image on the footer div.
You can eliminate the black bar by making sure there are no margins pushing the footer div away from browser window, and making sure any default margins created by the browser itself are reset. (i.e. body { margin: 0;}) However, the bar can still show up in other browsers (usually Safari). One solution would be to set the background of the <body> tag to the same as the footer tag. This only really works with repeatable images though.
I'd say your best bet would be to fade the bottom of the image to black like you've done at the edges.
You can use background: scroll; to make the content scroll over the background, but viewed at different resolutions you could still see the bottom of the image.