How to prevent my navbar to be shrink when scrolling

[dauruk0512]

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

[dsonesuk]

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

[dauruk0512]

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

[dsonesuk]

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.

[dauruk0512]

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

[dauruk0512]

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

 

1. 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 !
2. 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

[dsonesuk]

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

[dauruk0512]

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

[dsonesuk]

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