I've got a problem with the taborder (keyboard focus) in a header. The header consists of a navigation, logo, some buttons and a link. In desktop the logo is left aligned and the menu is expanded but when the screen gets small the logo changes position to the center of the header and the menu is toggable with a hamburger icon. My issue is that if I put the navigation before the logo in the html, it works on small screens but in desktop the navigation gets focused first, which causes the user to navigate trough the whole navigation before going to the rest of the header content. So my question is, how can I solve it so that the taborder always start at the same position dispite which content it has? I don't want to set taborder=1, 2 etc.
Desktop:
[Logo] [Buttons] [Link]
[Expanded navigation] (below header)
Mobile: [Hamburger icon] [Logo] [Link]
I want the taborder to be Logo -> Buttons -> Link -> Expanded navigation, for desktop and for mobile: Hamburger -> Logo -> Link
I hope the question is understandable.
EDIT
Added an example of my problem: fiddle
And this is the css in the example:
header {
position: relative;
}
.button {
display: block;
position: absolute;
top: 0;
left: 0;
}
.content {
margin: 0 auto;
width: 100px;
text-align: center;
}
#media screen and (min-width: 480px) {
.button {
display: none;
}
.content {
margin: 0;
text-align: left;
}
}
A common idiom is to provide a "skip links" tab stop at the very top of the document, or at least before the links you want to skip. This special tab stop can be hidden from view until focused with the tab key, so nobody needs to know it's there unless they're using a keyboard.
https://webaim.org/techniques/skipnav/
Bear in mind that screen reader users will usually have alternative ways to navigate around the document without using explicit tab stops. Browsing by headings is very common, for example.
Related
What I'm Trying To Do (including JSBin)
My nav bar works fine on a desktop: when you click on an item, it scans to that section of the page, beginning with the header. However, when I resize to mobile, the spacing is off. When you click on "Section 2" on the navbar, you should see "Section 2" pop up directly below the navbar.
See example on JSBin.(Use Developer tools to show on mobile to see the problem when clicking around the nav bar).
What I've Tried/What I Think The Problem Is
I'm pretty sure it has to do with this:
.anchor:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
Which I got from this Github page, but I can't figure out how to automatically change the 75px number depending on the screen size. I read this question/answer but still can't figure out how to change the CSS in my case.
It looks like that page is for Bootstrap. What you're looking for is built directly into CSS!
Check out this page.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Essentially what's happening to you is that, once your page is scaled down to a mobile device. It causes your buttons (the text elements) to stack, causing your nav to be vertically larger than it should be!
To answer your code question try something like this:
.anchor:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
#media only screen and (max-width: 480px) {
.anchor:before {
height: 65px;
}
}
What happens is that once your screen width goes unter 480px (this value can be tweaked to whatever you need it to be) it will run the height: 65px; and override the height style from the one above it.
Another way you can prevent your nav bar from resizing when you don't want it to is by setting overflow: hidden; and then specifically defining what you want the height to be. (Personally I like to use height: 47px;. It feels like a perfect size to me)
That should answer your question. However, what you should really do is look into compiling all of your nav buttons into a dropdown menu once your screen shrinks to be small enough.
If you're feeling up to it, check out this page:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
Okay, so I am trying to make a responsive navigation menu for my website. I am currently having trouble making this dang float property work. So I've taken a combination of https://www.w3schools.com/ and a YouTube tutorial to make a website that I envision.
Here is what I got so far (Link to my code is below in hyperlink to JS Fiddle)
https://jsfiddle.net/dcannon96/e9mgsLqd/
So if you actually look in the label attribute under the media and screen section where the max-width begins for pixels.
Take a look at this part of my CSS.
label {
display: block;
cursor: pointer;
/* float: right; */
}
My goal is to make my top nav bar menu to appear beneath the hamburger icon when in mobile/tablet form. When in desktop mode, my menu list is on the left side of the screen, but when I am in mobile, the float right DOES NOT bring the rest of the items beneath the top nav bar.
This is what I'm trying to do https://youtu.be/xMTs8tAapnQ?t=611 (video skips to 10 minute and 11 seconds in)
So you can see what I am talking about once you remove the /**/ comment from the float right and see the different results.
you have to add overflow:hidden to the menu so the top nav bar menu to appear beneath the hamburger icon
see this https://jsfiddle.net/dow2qLck/1/
.menu {
overflow:hidden;
text-align: center;
width: 100%;
display: none;
}
hi I uncommented the float:right property of .label and it was aligned to right.. Hope this what you're looking for. thanks
visit below link
https://jsfiddle.net/dow2qLck/1/777
I've been working a lot with responsive webdesign lately, and I've come across a bit of an issue. I have a one-page based website, where I currently have 2 sections (pages) first one is the intro, and second one is "about me". Now, I had a couple of my friends to visit my website on their computers (1 being a laptop, which screen height is very low compared to my 24 BenQ) I want to ask how I can make my content static, so the intro doesn't sort of disappear underneith the "about me" section.
.intro-container
{
width: 70%;
letter-spacing: .2em;
height: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#ContentWrap-2-about
{
width: 100%;
height: 50%;
background-color: rgb(255, 255, 255);
}
these are the wrappers that sort of interacts the wrong way. You can visit www.old.vhammershoi.dk and scale down your browser to see that the box with the arrow in it (click and explore popdown) will move underneith the about me section
Thank you in advance
First off all, there is no need for custom height. You have set height to element with overflow: hidden, and because content is longer than element, button is pushed down. Remove height from all main elements, also, remove margin from intro container. In that way, button will be visible, and rendered page will be the same as without changes (except visible button)
Try one of these to fix your DIV (intro container) to the top of the screen.
position:fixed;
position:static;
position:absolute;
Here is a working example : http://jsfiddle.net/19Lhchyy/1/
Using postition:fixed;
http://www.w3schools.com/cssref/pr_class_position.asp
#ContentWrap {
min-height: 100%:
padding-bottom:30px;
}
#clickAndExploreText{
position: absolute;
}
I dont know if ure able to position it but if you dont, your container will grow on hover
Then your Text 'Click and Explore' will never be under the following container.
aditionally you are missing some white-space:nowrap in your mobile version to prevent linebreak for the headlines and the tet 'click and Explore'
I am working on a website with responsive navigation menu (used Trunk-js for the menu) The menu needed to be semi-transparent. When the mobile view is active everything is great, but when resize the window (desktop version of the website become active) a black div appear behind the menu, and the navigation menu becomes grey. I spent a few hours to find where is the problem without result.
You can find my website here: enter link description here
You need to move your image behind the header.
It seems like it's getting pushed below it.
Try setting your header to this:
header.slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 2;
}
.content.slide {
z-index: 1;
}
then it should work.
My web page is at http://www.sarahjanetrading.com/js/j/index.html.
In the navigation, when I hover or want to click on the first three navigation
items, they don't function properly. The whole of the area of the first three navigation items
are not clickable. The rest of the navigation items are working properly.
Any help would be highly appreciated.
Your logo is appearing over the top of the 3 items
If you reduce the height of the logo you can select the items
The logo (< div class="logo">) is above the first 3 elements, try resizing it.
.logo {
height: 45px;
}
Firebug is quite good to find these problems
As Curt said Your logo is appearing over the top of the 3 items . So, here is the solution just give z-index to your ul#nav DIV.
Like this:
ul#nav {
margin-left: 25px;
position: relative;
top: 22px;
z-index: 1;
}