When I create a relative link in HTML, Bot Workshops it links properly, but places the anchor at the top of the page, covered by a navigation bar. Is there a way to make it be lower so that the anchor is underneath the navbar?
If I understand it correctly, when the user clicked Bot Workshops, it should go underneath the navbar.
In your navbar, add an id. For example:
<div id="bot"></div>
Maybe you need to change the display of the anchor link.
a {
display: block;
...
}
You should add a padding-top to the #bot div (approx the height of the navbar plus some space). (This is based on some assumptions below)
I think your navbar is fixed?
If that is the case, the top of the #bot anchor div will be on the top-edge of the browser viewport. But the navbar will be obfuscating some of that content underneath.
This is more of a css/styling issue.
If you do add a padding-top, you might also want to make sure that value is responsive.
Related
I have a webpage with a horizontal top sticky navbar 60px high.
On my page, I have links to locations on the same page with Link leading to id="someTarget"
My problem is that when the resulting link is clicked, the page scrolls to the target heading, but it is at the very top of the screen, behind my sticky navbar.
How can I specify that the scroll add a 60px cushion so that the target is at the top of the viewable area, not at the top of the screen?
So far I have just been manually adding in my id="someTarget" a few lines above what I actually want to be the target, but this seems a pretty imprecise way of doing it.
If you are okay with using a CSS framework for this, Bootstrap has what you need. There is an offset option that you could use.
while designing my website (for my school project), I find that my image keeps being placed on top of my navigation submenu when activated. Any help with what to do?
Here is a visual picture of what I am talking about
On a side note: any suggestions on which styles to wrap the text into a div/p tag to align properly by the laptop?
If I understand your question correctly, then you want your image of the laptop to stay behind your navbar, right?
If so, then you have so use the z-index CSS property.
Reference for it here:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
The higher the z-index, the further forward it will be placed. An element with z-index:100 will be displayed on top of an element with z-index:99 and below.
Set the z-index of your navbar to be 100 or so, then you're sure it will always be in the front, like such:
.nav {
z-index:100;
}
Add this code to your navbar css, and it should help.
Good luck with your school project!
Best regards, Kevin
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 am making a single page scrollable website and I set my links to anchors along the page. All works fine except that the anchor will be displayed at the top of the page as default and it is covered by the fixed nav bar (73px height).
Is there any way of setting the display position 73px down from the top? All the elements already have their positions, paddings, margins etc :-/
Here is the website http://www.drawlight.net/wordpress/?page_id=1784
I really appreciate the help!
Juliana.
Demo Fiddle
Change the href of the scroll-to-top anchor to, e.g. #this_is_the_top
Then before it in your HTML add:
<a id='this_is_the_top'>top</a>
nb. You dont have to specifically add an a, any element with that id will work.
And also add the CSS
#this_is_the_top{
position:absolute;
top:73px;
}
At present, you are simply targetting the top of your page with the scroll position, as you're href is simply '#', you want to target a specific element which is offset from the top (using position and top).
I have a layout like this: http://jsfiddle.net/MTWu5/
Centered page, with sticky header. Inside the header there's menu links to anchors in the page. My problem is when I click on them, I want the anchor to scroll just under the header, not behind it.
How could I do this??
First, i'd write the anchor that way.
<a name="anchor" id="anchor"></a>
If you don't use the close tag for the a element, no position style can be applied without missed up everything.
Then i just applied that style
#anchor{position:absolute;margin-top:-100px;}
It seems to works. Your layout is preserved, no margin. That solution works only if you work with fixed height. The margin top is the height of your header.
Hope that is what you were looking for.
Link to example jsfiddle
hai your problem is fixed "The path is: http://jsfiddle.net/MTWu5/2/