How does this button switch bewteen visible and hidden - html

Question

So I started a basic angular 5 project in Visual studio. In it, it created a component called nav-menu-component. It came with like a standard navigation menu and mobile option that when the screen was less than 726px it would change.
However, I am trying to have the mobile view be the default view the entire time(ie I want a horizontal bar with a button that expands and collapses the menu no matter the screen width). but for the life of me I can not figure out how to do that.
CSS and especially bootstrap are my weakest points. Please if anyone could help explain why the button will only appear when the screen is less than 726px let me know. I do know how #media works but there doesn't seem to be anything in the ts or css that I atleast see that tells me this is flipping the button from hidden to visible. I have removed the #media(min-width) but that still does not display the button.
I believe the bootstrap version is 3.4.1 in my package.json
here is the html
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' [attr.aria-expanded]='isExpanded' (click)='toggle()'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' [routerLink]='["/"]'>Codes</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse' [ngClass]='{ "in": isExpanded }'>
<ul class='nav navbar-nav flex-column'>
<li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
<a [routerLink]='["/"]' (click)='collapse()'>
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
</ul>
</div>
</div>
</div>
css
li .glyphicon {
margin-right: 10px;
}
.flex-column {
width: 100%;
}
.navbar {
padding: 0;
}
.navbar-brand {
padding: 15px;
}
.navbar-toggler {
margin-right: 15px;
}
.nav-link {
padding-left: 16px;
}
/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #4189C7;
color: white;
}
/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
#media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.main-nav {
height: 100%;
width: calc(25% - 20px);
}
.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.navbar-header {
float: none;
}
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
typescript
import { Component } from '#angular/core';
#Component({
selector: 'app-nav-menu',
templateUrl: './nav-menu.component.html',
styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent {
isExpanded = false;
collapse() {
this.isExpanded = false;
}
toggle() {
this.isExpanded = !this.isExpanded;
}
}
Edit: Okay quick update I have changed the #media section to the below. but why did it seem like there was two #media sections even though I did a find all and could only find the one I am editing?
#media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.navbar-collapse.collapse {
display:none !important;
}
.collapse.in {
display: block !important;
}
}

Answer 1

the code at the media querie:
#media (min-width: 768px)
as it says in the comment is for convert the nav menu to a vertical sidebar, since you want a navbar and not a sidebar you can remove it completely.
And in Bootstrap 3 for have the mobile view be the default view the entire time you need to override the Bootstrap's default navbar behavior.
Here some examples:
Custom less file
Simple css override
Another css override and a method for bootstrap 4