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;
}
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 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.
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.
I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).