dauruk0512 Posted June 30, 2015 Share Posted June 30, 2015 (edited) Hi, i have been searching about why my navbar shrink when scrolling ! So here is my codepen http://codepen.io/anon/pen/OVzGyz but not working cause i don't know how to load it from domain people here is script need to load http://www.outyear.co.uk/smint/js/jquery.smint-v2.js Honestly i want to make one scroll page in my template yesterday i solve with same issue but diffrent width so here is my template http://imgur.com/1e1wKl2 but when i click then automaticlly scroll my navbar become shrink like this http://imgur.com/vyBb8th How can i prevent that shrink my navbar, Thanks ! Edited June 30, 2015 by dauruk0512 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 30, 2015 Share Posted June 30, 2015 You need apply subMenu to outer menu element which will use position: absolute then fixed as it scrolls down, inside that you require a container element that matches same width as '.container' then centre it with margin: 0 auto; http://codepen.io/anon/pen/doJEBr Link to comment Share on other sites More sharing options...
dauruk0512 Posted July 1, 2015 Author Share Posted July 1, 2015 Wow you are really master of CSS, JQUERY PHP hire me to be your student ! Bye the way 1.how can you add up js sminth in code pen ? 2. How to debug it in bootsrap and i know what is wrong ! 3. subMenu has setting style css in js script with fixed:0px; left:0px after i debug use firebug is it no problem when you add up style in css like this .subMenu {z-index: 100; left: 0; right: 0}{ width: auto;} and again what is width:auto <-----it's useless or not cause i didn't see any selector ?Really feel helpfull dsonesuk Freddy Sidauruk Link to comment Share on other sites More sharing options...
dsonesuk Posted July 1, 2015 Share Posted July 1, 2015 1) select setting and insert link to smint js, and jquery in insert in head section.2) Use firebug, it lets you add css styling to your requirements live, without editing your original css.3) { width: auto; }is mistake, remove it. Link to comment Share on other sites More sharing options...
dauruk0512 Posted July 1, 2015 Author Share Posted July 1, 2015 Thanks a lot dsonesuk, bye the way every time i feel bug i make post in my blog here use english even my original languange is not english please take look here teacher, even not much posting but i will try post as much as i can http://sidaurukfreddy.blogspot.com Thanks you Freddy Link to comment Share on other sites More sharing options...
dauruk0512 Posted July 2, 2015 Author Share Posted July 2, 2015 Sorry for late testing dsonesuk after testing in my real project it give me little errors ! here is images http://imgur.com/YI2Y0sy Then i move your whole example to my local also give me errors also ! Well after debuging and follow your codepen i found little things need disscus Your codepen use real js smint but in my local i use js sminth which modify by my self cause js smint has css left:0px so remove the filejs sminth change the original like your examples but give me errors too ! Why there is diffrent results with your codepen with real file, i dont how to debug css might be css struktur but i dont know, bellow my strukture css <link rel="stylesheet" href="<?php echo base_url()?>asset/css/bootstrap.min.css"><link rel="stylesheet" href="<?php echo base_url()?>asset/css/style_luar.css"> then i trying to change the position css like this <link rel="stylesheet" href="<?php echo base_url()?>asset/css/style_luar.css"><link rel="stylesheet" href="<?php echo base_url()?>asset/css/bootstrap.min.css"> The navbar not shrink when scroll but the navbar to be default here is images http://imgur.com/ogU8zZw Sorry for stupid question, Really thanks helpfull ! Freddy Sidauruk Link to comment Share on other sites More sharing options...
dsonesuk Posted July 2, 2015 Share Posted July 2, 2015 (edited) Codepen alters the plugin css styling, it should by default when at top of page use position relative; but at codepen it becomes position: absolute; instead, and clicking link does not take you fully to correct section, don't know if is conflict with bootstrap styling, but it is not working as it should http://codepen.io/anon/pen/yNvvZg i forced it to use plugin css styling the way it should at the end, the sticky to top of page works but not the rest. I would consider using the bootstrap tab nav instead. EDIT: found out that .section was using a fixed height of 500px, but content extended beyond this so that is why link active was not working as it should, and only changing at every 500px of section reached. its not perfect but it is close. Edited July 2, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dauruk0512 Posted July 3, 2015 Author Share Posted July 3, 2015 Really thanks dsonesuk for your support, Hope your family fine ! but there is problem after final this issue, my big issue is making this navbar ! i know bassic about responsive then here is your css i implement to my css responsive /* TABLET LANDSCAPE / DESKTOP */@media only screen and (min-width: 1024px) {.container { }.subMenu {z-index: 100; left: 0; right: 0}.container, .subMenu .container-fluid{ width: 1024px; box-shadow: 0 0 30px grey;}} just answer me yes or no and explanation if you don't mind, is it true to make width navbar same with screen as above mention in media query ? @media only screen and (min-width: 300px) {/*.container, .subMenu .container-fluid has width same as screen media query above*/}@media only screen and (min-width: 480px) {/*.container, .subMenu .container-fluid has width same as screen media query above*/}@media (min-width: 1200px) {/*.container, .subMenu .container-fluid has width same as screen media query above*/} Bye the way i use your old way to make my nav bar working well, i don't know it working after this morning testing Freddy Sidauruk Link to comment Share on other sites More sharing options...
dsonesuk Posted July 3, 2015 Share Posted July 3, 2015 (edited) You need to make nav bar same width as '.container' because on how bootstrap css works by using a mixture of padding: 15px; and then minus margins, to get responsive layout, and the sticky menu using positioning with left:0; you can't just use width: 100% as it will 100% width plus 2x padding width, also you require fixed width to centre nav bar, so the best option was to use same method bootstrap uses by adjusting width depending on device width using media queries, the nav bar is then centred, using same width, same padding, margins for responsiveness as the '.container' and other bootstrap containers. Edited July 3, 2015 by dsonesuk 1 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