Wokingtown11 Posted September 2, 2016 Share Posted September 2, 2016 Hi, I have designed my own simple website, using the W3 "collapsable responsive sidenav" However when you click on one of the links from the sidenav the whole sidenav disappears and then resets from the edge of the screen. It does not look good. <nav class="w3-sidenav w3-collapse w3-white w3-card-2 w3-animate-left" style="width:200px;" id="mySidenav"> <a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-large w3-hide-large">Close ×</a> <a href="test_sidenav.html">Link 1</a> <a href="test_sidenav2.html">Link 2</a> </nav> and in W3.css: .w3-closenav {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .w3-opennav {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} I think i have added all the necessary code here. Any thoughts what i would need to do to keep it on the screen without it "flashing" every time a link is clicked? The attached files is simply the ones I am using to test this functionality test_sidenav.html test_sidenav2.html Link to comment Share on other sites More sharing options...
justsomeguy Posted September 2, 2016 Share Posted September 2, 2016 Do you have that online somewhere to look at? Make sure you're checking your developer console for error messages. Link to comment Share on other sites More sharing options...
James_Purcell Posted September 3, 2016 Share Posted September 3, 2016 Well for a start. <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> Should be <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" /> </head> <body> Put the script that is at the bottom of the page into the <head> Section (makes it easer to track bugs the looking all over a page for script tags. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 3, 2016 Share Posted September 3, 2016 The script is not required to be in between head tag, in fact its the norm these days to be placed at the bottom to improve load time. 1 Link to comment Share on other sites More sharing options...
James_Purcell Posted September 3, 2016 Share Posted September 3, 2016 The script is not required to be in between head tag, in fact its the norm these days to be placed at the bottom to improve load time. Really, putting it at the bottom improves load times, I honestly didn't know that. I have been keeping all the script at the top just to make it easer to bugfix. Wow, you learn something new every day. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 3, 2016 Share Posted September 3, 2016 Think about it, especially for mobile, you need html, and css the presentation side to load first, you don't want to wait for JavaScript scripts files to load slowing down your presentation of your website, since JavaScript requires all js targeted html elements to be rendered first, the better option is to load last. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 4, 2016 Share Posted September 4, 2016 Any thoughts what i would need to do to keep it on the screen without it "flashing" every time a link is clicked? Yeah, here is the obvious one, remove 'w3-animate-left' class for side nav, that is what is being triggered as every page is loaded. Link to comment Share on other sites More sharing options...
Wokingtown11 Posted September 5, 2016 Author Share Posted September 5, 2016 Yeah, here is the obvious one, remove 'w3-animate-left' class for side nav, that is what is being triggered as every page is loaded. oh wow, yes that worked a treat. Thank you very much Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now