CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
UI_Dev
UI_Dev

Reputation: 3417

How to use bootstrap collapse without affecting other elements?

This might be a simple css change in bootstrap v4, but stuck where to change exactly.

I have a navbar in bootstrap, everything works in desktop screen. but, when it comes to mobile screen we are seeing a button and if I click the button, menus are coming down.

The issue here is along with the menu, logo goes right and other menu's (welcome, U, H, L (these are images)) also comes down which is not right.

How can I make the above logo and subsequent menus fixed without changing if the screen size are changed?

Any help would be highly appreciated.

.navbar {
    height: auto;
    padding: 0px;

} 
.logoStyle {
    background-image: url(../../assets/images/logo.png);
    background-position: -15px 6px;
    background-repeat: no-repeat;
    background-size: auto 40px;
    margin-left: 18px ;
    padding: 11px 0 0 30px;
    height: 43px !important;
    }

    .active{
        text-decoration: underline;
    }

.navbar-brand {
    margin-right: 10px !important;    
}
.nav-item {
    margin-top: 5px;
}

.logout{
    background-image: url(../../assets/images/logo.png);
    float: right;
    height: 30px;
    width: 40px;
}

.dashboard {
    background-image: url(../../assets/images/dashactive.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.worklist {
    background-image: url(../../assets/images/worklist.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.userhistory {
    background-image: url(../../assets/images/tickets.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.user {
    background-image: url(../../assets/images/user.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.help {
    background-image: url(../../assets/images/help.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

.logout {
    background-image: url(../../assets/images/logout.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 30px;
    width: 40px;
}

 .user-logged span {
    color: #fff;
}
.welcomeTxt{
    font-size: 14px;
    color: #fff;
    position: relative;
    top: -8px;
}

.user-head {
    padding-left: 10px;
}

.user-head a {
    margin-right: 0px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"/></script>

<body>

	<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">        
			<span class="navbar-toggler-icon"/>
		</button>
		<h1 class="navbar-brand logoStyle">vTM</h1>
		<div class="collapse navbar-collapse" id="navbar-list-2">
			<ul class="navbar-nav">
				<li class="nav-item active">
					<a class="nav-link navbar-brand dashboard" routerLink="/dashboard" routerLinkActive="active">Dash</a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-brand worklist" routerLink="/worklist" routerLinkActive="active">Work</a>
				</li>
				<li class="nav-item">
					<a class="nav-link navbar-brand userhistory" routerLink="/userhistory" routerLinkActive="active">User</a>
				</li>
			</ul>
		</div>
		<span class="user-logged">
			<span class="welcomeTxt">Welcome </span>
			<span class="user-head">
				<a class="navbar-brand user">U</a>
				<a class="navbar-brand help">H</a>
				<a class="navbar-brand logout">L</a>
			</span>

		</span> 
	</nav>
</body>

JSFIDDLE

Upvotes: 1

Views: 451

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Add position:absolute with media query

@media(max-width:576.9px){
  .navbar-collapse{
    position: absolute;
    left: 0px;
    top: 50px;
    background: rgb(52, 58, 64) none repeat scroll 0% 0%;
    width: 100%;
  }
}

https://jsfiddle.net/lalji1051/3ako7h82/3/

Upvotes: 1

Related Questions