My bootstrap navbar collapse breakpoint wont change - html

Question

i am trying to make my bootstrap navbar collapse if the webpage width is under 1024px but it collapses under 700ish pixels width. I have tried alot of solutions that i googeled but no luck. I have tryed CSS from this post "Bootstrap 3 Navbar Collapse" it has a problem similar to mine. But no matter what i do i just wont collapse after 1024px width. I have tryed copying their html(boostrap navbar)+css just to see if that will work but no luck.
My CSS
#media (max-width: 1024px) {
ul.nav.navbar-nav{
margin-left:-15px;
}
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
My Bootstrap navbar
<nav>
<img class="kopakuttlogo" src="kopakuttlogo.jpg" alt="Logo" width="400" height="400"/>
<div class="navigatsioon">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>AVALEHT</li>
<li>HINNAKIRI</li>
<li>RENDITINGIMUSED</li>
<li>TEHNIKA</li>
<li></span>KONTAKT</li>
</ul>
</li>
</ul>
</div><!-- /.navigatsioon -->
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Answer 1

Hey i got it to work with adding .navigatsioon everywhere
#media (max-width: 1024px) {
.navigatsioon ul.nav.navbar-nav{
margin-left:-15px;
}
.navigatsioon .navbar-header {
float: none;
}
.navigatsioon .navbar-left,.navbar-right {
float: none !important;
}
.navigatsioon .navbar-toggle {
display: block;
}
.navigatsioon .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navigatsioon .navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navigatsioon .navbar-collapse.collapse {
display: none!important;
}
.navigatsioon .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navigatsioon .navbar-nav>li {
float: none;
}
.navigatsioon .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navigatsioon .collapse.in{
display:block !important;
}
}

Answer 2

Bootstrap. How to change the navbar collapse breakpoint
Go to the Customize page / Grid system and set in the field #grid-float-breakpoint the value that you need.
Click the Compile and Download button at the bottom of the page.
Extract the files bootstrap.css and bootstrap.min.css from the resulting archive.
Use them instead of the standard files bootstrap.css and bootstrap.min.css on your site.
Nothing else is needed.