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.
Related
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.
So when I scroll down from the landing page it sticks at the next section. I'm not sure whats happening. There's also a white bar at the bottom of my site that i can't get rid of. How do I fix a scrolling that seems to "stick" when it goes over a certain section and how do I fix white space at the bottom of my footer? Here's a link a github I created to show what I'm dealing with, too much code to copy and paste here to get a good answer
https://github.com/OakHarbor/mapletest
I checked the site, and the problem is you are using a BIG really BIG images in the background, images like "wood1.jpg" has a resolution of 6000x4000px this is a lot the other image "wood2.jpg" has almost 8200x5500px, just this image has 12mb this is like 4 times what a whole page should have of size, so when you're scrolling the page this images start to load so the "sticks" is the page suffering to load.
Your imagens should be something like 800x400 or even less and don't forget to optimize them there is tools in the web that remove all the unecessary meta information check here https://imagecompressor.com
And your "white bar" is that you set a id in your tag html "noScroll" and this css was apply to it, basicly this alow you to acess the content with scroll bars, if you don't need this feature just remove it that the white bar will disappear
#noScroll {
overflow: scroll;
}
For Stick Problem
Please keep the fixed background to scroll.
For Footer White bar
If you want to remove the white bar from the footer, please remove top: -50px from #footer id and use of margin-top: -50px instead of this and now It will be fixed.
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I have some problems with a project and am on a thight deadline.
The problem:
For a webproject the header consists of a full-width background slider and a menu containing the logo and menu items see: (http://d.pr/i/ln6N)
The problem I have is the way it is divided, the red part acts as a slider. The logo has some space between the menu bar.
How would I go about the transparant space arround this logo?
What I have now is a 100% width div containing the list items and logo on top of it.
I can't figure out how to get the white space on the left and right of the logo while the menu bar is 100% width.
I hope the image (above) clarifies some as I just don't know how to handle this one.
Thanks in Advance,
- V
I got it fixed, dirty tho..
In the image the gray area is one big image with the center cut out so i can place the logo en menu in it so there is some transparant space left.
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.