I am going through a book on responsive web design in which the author builds the webpage at this address: http://responsivewebdesign.com/robot/
Since the webpage is responsive, if you view it at a browser screen width greater than 1025px, you can see that the h1 element with class logo sits on top of the unordered list with classes nav and nav-bar (the ul being the navigation bar).
See the below link to the screenshot taken of the webpage in Chrome Developer Tools for an example of what I mean by this.
ul with nav and nav-primary classes highlighted in Chrome Developer Tools:
As you can see in the above image, that unordered list which composes the navigation menu bar sits underneath the h1 logo element. You can go to the website, open it in your browser and see this for yourself.
Now with the background information given here's my question.
How is it that h1 element with logo class is able to sit on top of ul with nav and nav-primary classes?
As far as my understanding goes, you would normally have to have the unordered list with position set to absolute in order to do this (both are floated left), but upon inspection in Chrome Developer Tools both of the above mentioned elements have position set to relative.
I can not replicate this in the way that the creator has created it. What am I missing or not understanding here?
The logo element in particular is positioned relative in order to be given a z-index, if the logo is given a z-index higher than that of the navbar then it would seem to be layered on top of it.
After playing around with the html and css I discovered that the h1 element with class logo is floated to the left in the css and the div element with class nav-bar alongside it did not have a float on it and hence had 100% of the width of the containing element and was therefore able to overlap the area taken up by the h1 element with class logo.
Related
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.
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 two relatively positioned areas on my page, the content and the header.
The content has a higher z-index than the header - this is a requirement for the structure of the page.
I've simplified the HTML and CSS to illustrate what I'm trying to do here:
http://cb3.securetree.com/example.html
This presents an issue with dropdown menus that exist in the header because they display underneath the content region even though their z-index is higher.
On the example page, notice how the dropdown menu goes beneath the content region.
Appreciate any assistance in solving this issue.
Relatively positioned elements will display on top of things that are not relatively positioned. You should avoid having to use relative positioning where it's not necessary. If you use floats and margins etc to move things around on the page, you shouldn't have any z-index issues.
I'm building a navigation menu for a website and the menu has submenus. When the submenu slides down, it needs to lie behind the main navigation. I've tried using z-index but it won't work. Since the submenu is a child of the LI, is it not able to lie behind?
The code is a bit verbose due to the image sprite, so I'll link to a pastie:
http://pastie.org/1100075
And here's some images to support my explanation.
Desired outcome: http://imgur.com/WeU5T.png
Current outcome: http://imgur.com/0ZC4v.png
Move the li.home a link out side of ul.nav, and put it inside of an absolutely positioned block element with a z-index > 0.