diff --git a/src/app/top-bar/top-bar.component.html b/src/app/top-bar/top-bar.component.html
index 328e2bd..cc518b7 100644
--- a/src/app/top-bar/top-bar.component.html
+++ b/src/app/top-bar/top-bar.component.html
@@ -1,14 +1,17 @@
 <header *ngIf="authService.isAuthenticated()">
 	<nav class=" yellow  container-full-height">
 		<div class="flex-container container flex-row">
+
 			<div class="px-3 bg-white">
-				<a (click)="goToDashboard()" class=" navbar-brand logo" href="javascript:void(0);">
+				<a (click)=" goToDashboard()" class=" navbar-brand logo" href="javascript:void(0);">
 					<img src="../../assets/images/DSU_logo.PNG">
 				</a>
 			</div>
+
 			<div class="row" style="width: 100%; margin: 0">
-				<div class="flex-column pr-3 d-none d-xl-block col-xl-10 pl-0">
-					<ul class="nav">
+
+				<div id="divVisibleLinks" class="flex-column d-none d-sm-flex col-sm-7 col-md-8 col-lg-9 col-xl-9">
+					<ul class="nav" id="ulVisibleLinks">
 						<li>
 							<a routerLink="/volunteers" class="nav__link" routerLinkActive="active-link">Voluntari</a>
 						</li>
@@ -16,7 +19,8 @@
 							<a routerLink='/resources' class="nav__link" routerLinkActive="active-link">Resurse</a>
 						</li>
 						<li *ngIf="authService.is('DSU')">
-							<a routerLink='/organisations' class="nav__link" routerLinkActive="active-link">Organizații</a>
+							<a routerLink='/organisations' class="nav__link"
+								routerLinkActive="active-link">Organizații</a>
 						</li>
 						<li *ngIf="authService.is('DSU', 'INS')">
 							<a routerLink='/users' class="nav__link" routerLinkActive="active-link">Utilizatori</a>
@@ -29,25 +33,29 @@
 						</li>
 					</ul>
 				</div>
-				<div class="navbar-btn flex-row d-flex justify-end align-center col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-2 pr-4 pl-0">
-						<div ngbDropdown class="d-inline-block">
-								<div class="userarea" id="dropdown1" ngbDropdownToggle>
-										<app-current-profile></app-current-profile>
-									</div>
-								<div ngbDropdownMenu aria-labelledby="dropdown1">
-									<button ngbDropdownItem [routerLink]="['users', 'id', authService.user._id]">Profil</button>
-									<button ngbDropdownItem routerLink='/volunteers' class="hidden-button">Voluntari</button>
-									<button *ngIf="authService.is('DSU', 'NGO')" ngbDropdownItem routerLink='/resources' class="hidden-button">Resurse</button>
-									<button *ngIf="authService.is('DSU')" ngbDropdownItem routerLink='/organisations' class="hidden-button">Organizații</button>
-									<button *ngIf="authService.is('DSU', 'INS')" ngbDropdownItem routerLink='/users' class="hidden-button">Utilizatori</button>
-									<button *ngIf="authService.is('DSU')" ngbDropdownItem routerLink='/map' class="hidden-button">Hartă</button>
-									<button ngbDropdownItem routerLink='/info' class="hidden-button">Info</button>
-									<div class="dropdown-divider"></div>
-									<button ngbDropdownItem (click)="logout()">Delogare</button>
-								</div>
-							</div>
+
+				<div class="nav flex-row d-flex align-center col-4 col-sm-1 col-md-1 col-lg-1 col-xl-1">
+					<div ngbDropdown class="px-0 nav-btn-drop d-inline-block">
+						<div class="nav-btn" id="nav-btn" ngbDropdownToggle></div>
+						<div ngbDropdownMenu id="divHiddenLinks" class="yellow">
+							<ul class="nav" id="ulHiddenLinks"></ul>
+						</div>
+					</div>
+				</div>
+
+				<div class="navbar-btn flex-row d-flex justify-end align-center col-8 col-sm-4 
+				 col-md-3 col-lg-2 col-xl-2">
+					<div ngbDropdown class="d-inline-block">
+						<div class="userarea" id="dropdown1" ngbDropdownToggle>
+							<app-current-profile></app-current-profile>
+						</div>
+						<div ngbDropdownMenu aria-labelledby="dropdown1">
+							<button ngbDropdownItem [routerLink]="['users', 'id', authService.user._id]">Profil</button>
+							<button ngbDropdownItem (click)="logout()">Delogare</button>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	</nav>
-</header>
+</header>
\ No newline at end of file
diff --git a/src/app/top-bar/top-bar.component.scss b/src/app/top-bar/top-bar.component.scss
index 292901a..21852ef 100644
--- a/src/app/top-bar/top-bar.component.scss
+++ b/src/app/top-bar/top-bar.component.scss
@@ -37,6 +37,28 @@ header {
   color: #fff;
 }
 
+.nav .nav-btn-drop:hover {
+  background-color: #264998;
+  color: #fff;
+}
+
+#ulHiddenLinks li,
+#ulHiddenLinks li a {
+  width: 100%;
+}
+
+.nav-btn {
+  width: 3rem;
+  text-align: center;
+}
+
+@media only screen and (max-width: 575px) {
+  .nav-btn {
+    width: 5rem;
+    text-align: center;
+  }
+}
+
 .yellow {
   background-color:rgb(243,	217,	115	);
 }
@@ -62,16 +84,6 @@ header {
  height: 100%;
 }
 
-.hidden-button {
-  display: none;
-}
-
-@media (max-width: 1199px) {
-  .hidden-button {
-    display: block;
-  }
-}
-
 .dropdown-item:active {
   background-color: gray;
 }
@@ -84,4 +96,4 @@ header {
 .active-link {
   background-color: #264998;
   color: #fff!important;
-}
\ No newline at end of file
+}
diff --git a/src/app/top-bar/top-bar.component.ts b/src/app/top-bar/top-bar.component.ts
index 1c3db2e..7327728 100644
--- a/src/app/top-bar/top-bar.component.ts
+++ b/src/app/top-bar/top-bar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { AuthenticationService } from '@app/core';
 import { Router } from '@angular/router';
 
@@ -13,31 +13,98 @@ export class TopBarComponent implements OnInit {
 	 * top bar to be shown over all the other components
 	 */
 	constructor(public authService: AuthenticationService,
-		private router: Router) {}
+		private router: Router) { }
 
-  ngOnInit() { }
+	ngOnInit() { }
 
-  /**
-	 * logout from account
-	 */
+	ngAfterViewInit() {
+		this.onResized();
+	}
+
+	@HostListener('window:resize', ['$event'])
+	onResize() {
+		this.onResized();
+	}
+
+	onResized() {
+		var btn = document.getElementById("nav-btn");
+		var vlinks = document.getElementById("ulVisibleLinks");
+		var vlinksChildren = vlinks.getElementsByTagName("li");
+		var hlinks = document.getElementById("ulHiddenLinks");
+		var hlinksChildren = hlinks.getElementsByTagName("li");
+
+		var numVisibleItems = 0;
+		var totalItems = vlinksChildren.length + hlinksChildren.length;
+		var totalSpace = document.getElementById("divVisibleLinks").clientWidth - 30;
+		var usedSpace = 0;
+		var remainingSpace = totalSpace - usedSpace;
+
+		// get all links in one array
+		var initiallength = hlinksChildren.length;
+		for (var k = 0; k < initiallength; k++) {
+			vlinks.append(hlinksChildren[0]);
+		}
+
+		// set visible links
+		for (var i = 0; i < vlinksChildren.length; i++) {
+			if (vlinksChildren[i].clientWidth < remainingSpace) {
+				usedSpace += vlinksChildren[i].clientWidth;
+				remainingSpace = totalSpace - usedSpace;
+				numVisibleItems++;
+			} else {
+				break;
+			}
+		}
+
+		// set hidden links
+		for (var j = vlinksChildren.length - 1; j >= numVisibleItems; j--) {
+			hlinks.prepend(vlinksChildren[j]);
+		}
+
+		// update height of dropdown menu
+		var divHiddenLinks = document.getElementById("divHiddenLinks");
+		var newHeight = hlinksChildren.length * 60 + 20 + 'px';
+		divHiddenLinks.style.height = newHeight;
+
+		// if no items visible, add 'Menu' to button
+		if (numVisibleItems == 0) {
+			btn.innerText = "Menu";
+		} else {
+			btn.innerText = "";
+		}
+
+		// if all items visible, hide the button
+		if (numVisibleItems == totalItems) {
+			btn.classList.add("d-none");
+			divHiddenLinks.classList.add("d-none");
+		} else {
+			btn.classList.remove("d-none");
+			divHiddenLinks.classList.remove("d-none");
+		}
+	}
+
+	/**
+	   * logout from account
+	   */
 	logout() {
 		this.authService.logout().subscribe(
-		(didlogout: Boolean) => {
-			if (didlogout) {
-				this.router.navigate(['/login']);
-			}
-		},
-		(error: any) => {
-			console.log('logout error: ', error);
-		});
-  }
+			(didlogout: Boolean) => {
+				if (didlogout) {
+					this.router.navigate(['/login']);
+				}
+			},
+			(error: any) => {
+				console.log('logout error: ', error);
+			});
+	}
 
-  /**
-	 * go to home path on icon click
-	 */
+	/**
+	   * go to home path on icon click
+	   */
 	goToDashboard() {
 		this.router.navigate(['/' + this.authService.homePath()], {
 			replaceUrl: true
 		});
 	}
+
 }