On my site http://richardclifford.net/, whenever a user clicks the one-page #id elements it goes to the very first piece of content the and ignored all the container padding and h2 margin-top to look like this
I'd want it to scroll to include the padding or have an offset like this.
I've add an offset on my scrollspy but that is not fixing it and not sure how I can fix this.
add margin-top: -50px;padding-top: 50px; to target id it works
#work,#about,#contact,#copyright{
margin-top: -50px;
padding-top: 50px;
}
You can use margin-top and padding-top for this with out affecting to the front side of the website. Try to add -50px to margin top and 50px to padding top. This will fix your issue.
One common way is to add invisible pseudo elements to the original target elements of the links via CSS, like this:
#work::before {
display: block;
content: " ";
margin-top: -60px;
height: 60px;
visibility: hidden;
pointer-events: none;
}
This will "extend" the element with that ID in a way which causes the anchor to be 60px above the main element (can be any value), without causing any other visible changes.
Related
Got this resource from a friend , fiddled around the codes
i want to move this bar down because it is blocking the text, when i add padding-top you can see the image what happened.
#header .header-btn-collapse-nav {
outline: 0;
display: block;
position: relative;
z-index: 1;
}
Thank you
bar
try using margin-top: 100px; instead of padding.
Padding creates "inner spacing" in between the parent and child elements, whereby margin is responsible for "outer spacing".
If you want to move the button downwards, without it taking up more screen space, you'll have to use margin-top: 100px; instead
As you can see i have a image A and image B now when i click on object 1 an iframe comes up as shown in image B but object 2 goes to the bottom how can i fix this with CSS please help.
By making the iframe position: absolute you can take it out of the flow of the document and stop it from forcing your other elements down the page.
Something like the following should achieve what you are looking for I believe:
.header iframe {
position: absolute;
top: 20px; /* this should be the height of your top (black) bar */
left: 0;
}
Assuming you want to have them on the same line, all you need to do is enter code here display: inline; to both of your objects, then to move them to other spots on the same page use the 4 ways to move them: padding-top, padding-bottom, padding-left, and padding-right. For example:
.object1{
display: inline;
padding-top: 100px;
}
This is the site link. The footer is the bootstrap's .well. It has some default margin-bottom you can see that with inspect element option. Now I have tried everything that I knew to remove the margin bottom ( Except editing the original bootstrap file I don't think I would need to do that ). For example:
footer.well { margin-bottom: 0px !important; }
I've also tried doing inline css but no use. Can anyone help me?
Note: If I remove the margin with the inspect element tool, it gives me the exact result I want.
One of parent divs have relative position and "top: -30px;" defined, if you remove that all comes to order
This is the line:
<div style="position: relative; top: -30px;" class="nav_wrapper padding">
Just redefine this to top: 0; and there you have it. Rest of padding is footer actual padding which you can remove with:
footer.well { margin-bottom: 0px !important; }
You need to do there changes to fix this.
1) Indeed remove the bottom margin AND the 1px bottom border:
footer.well {
margin-bottom: 0px;
border-bottom: none;
}
No need for !important here though
2) The element will still be shifted to the top because its parent element forces it to do so. Cancel that rule by removing it. Change:
<div style="position: relative; top: -30px;" class="nav_wrapper padding">
to simply
<div class="nav_wrapper padding">
3) Once removed at the top there will be a 30x gap because you just recreated it to clear the bottom. Here is a much cleaner way to recreate it without modifying the bottom:
#header {
margin-bottom: 30px;
}
All CSS rules must be declared after the bootstrap CSS file rules. Preferably from another file loaded after.
Adding margin-bottom: 0px; to footer.footer-home within custom.css should solve your problem.
I made vertical dropdown menu in bootstrap. Everything works just fine except one thing. The whole submenu is positioned using fixed attribute, and when there is some more content of page, the whole submenu is scrolling with page.
Here you have example: Bootply
Is it possible to fix it?
The problem is that all the element before that dropdown are positioned relative which makes absolute position of width to 100% of body width difficult (read more). If you aren't looking for a JavaScript solution than with some changes to the mark-up and CSS(removing container class from li.inline-list , removing col-sm-3, changing col-sm-9 to 'col-sm-12', postioning nav link in center and using container-fluid instead of container to wrap them) I came up with this Bootply .Observe the CSS I have added
.top-main .dropdown-menu {
width: calc(100% + 60px);
position: absolute;
left: -30px;
}
Even though I could get the sub-menu to almost full length, container-fluid and col-x-x both leave 15px padding on both sides, so I had to give -30px position to left and add 60px to width using calc . Calc is supported by IE9+ only.
Change in your css this,
.top-main .dropdown-menu {
width: 100%;
position: absolute;
top: 87px;
z-index: 1000;
text-align: right;
padding: 5px 0;
margin: 0 auto;
}
This will make it stay
I have a fixed navigation bar on my website that stays at the top with links that take me to different sections further down the page. However, because my fixed nav bar has a height of 40px, the beginning 40px of every section is covered up. How would I offset where my links take me by 40px using either HTML or CSS?
Thanks.
You might try absolutely positioning "dummy" anchors 40 pixels above the top of each section. You can give them zero width/height and hidden visibility to ensure that these anchors don't affect how your page is displayed. When the user clicks one of the links in your fixed navigation bar, the window will scroll to the top of the dummy anchor, 40 pixels above the beginning of its actual section.
Example HTML:
<div class="navbar">
Anchor 1
Anchor 2
Anchor 3
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
Example CSS:
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
For a working example, see http://jsfiddle.net/HV7QL/
Edit: CSS3 also includes the :target pseudo-class, which applies to an element whose id has been referenced by the href of a link in the document, or the hash value of the URL. You can apply a 40-pixel padding to the top of the :target that will be applied only to the section the user selects from the fixed navbar.
Example CSS:
.section:target {
padding-top: 40px;
}
This is semantically cleaner than the method described above, but won't work on older browsers.
Working example: http://jsfiddle.net/5Ngft/
I just happened to stumble across this problem myself today so I had been thinking about it for a bit already, but I think I just found a solution:
Add a padding-top: 40px; margin-top: -40px to the element that you want to jump to. The negative margin cancels the padding, but the browser still thinks that the top of the element is 40px higher than it actually is (because in fact it is, only the content of it starts lower).
Unfortunately, this might collide with already set margins and paddings, and if you're using a background on the targeted element it's going to mess it all up.
I'll see if I can work around that and post a jsfiddle, but in the meantime here's a basic answer at least :)
edited: I thought I had a solution for the background, but it didn't work. Removed again.
final edit:
It does kind of work if you know the background color of the wrapping element. In my example I know the text is on a white background, but the titles have a silver background. To prevent the title from having a background on the extra padding we set, instead I put it on a pseudo-element before it:
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
This way the extra padding has a white background again, but this only works if you already know what background it needs. Setting it to transparent for example will show the underlying background of the title itself, not of the article.
jsFiddle: http://jsfiddle.net/Lzve6/
Heading one is the default one you're having problems with.
Heading two is my first solution, guaranteed to work on almost all browsers
Heading three is using the :before pseudo-element, might not work on older browsers.