Skip to content

M
Moments
Commit 1ac0dee8 by Aksa98
Options

3:42 7/24/19

parent 64800bb2
Showing with 185 additions and 67 deletions
src/app/header/header.component.html
<nav class="navbar navbar-expand-sm">
<div class="container">
<div class="logo" href="#"><img src="../../assets/img/Moments__logo.png"></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"><i class="fa fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="Text-Style1 nav-link" href="#">WRITE A REVIEW</a>
<nav class="navbar navbar-expand-sm ">
<div class="container">
<div class="logo" ><a href="#"><img src="../../assets/img/Moments__logo.png"></a></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"><i class="fa fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="Text-Style1 nav-link" href="#">WRITE A REVIEW</a>
</li>
<li class="nav-item">
<a class="Text-Style nav-link brd " >PLANNING TOOLS</a>
</li>
<li class="nav-item linec">
<a class="brd">|</a>
</li>
<li class="nav-item">
<a class="Text-Style nav-link brd " href="#">PLANNING TOOLS</a>
<li class="nav-item ">
<a class="Text-Style nav-link brd" href="#">VENUES</a>
</li>
<li class="nav-item linec">
<a class="brd" >|</a>
</li>
<li class="nav-item linec">
<a class="brd">|</a>
</li>
<li class="nav-item">
<a class="Text-Style nav-link brd"href="#">VENDORS</a>
</li>
<li class="nav-item ">
<a class="Text-Style nav-link brd" href="#">VENUES</a>
<a class="login nav-link" (click)="goto('login')">LOGIN</a>
</li>
<li class="nav-item linec">
<a class="brd" >|</a>
</li>
<li class="nav-item">
<a class="Text-Style nav-link brd" href="#">VENDORS</a>
<li class="nav-item ">
<a class="join nav-link" (click)="goto('join')">JOIN</a>
</li>
<li class="nav-item ">
<a class="login nav-link" href="login">LOGIN</a>
</li>
<li class="nav-item ">
<a class="join nav-link" href="join">JOIN</a>
</li>
</ul>
</div>
</div>
</nav>
\ No newline at end of file
</ul>
</div>
</div>
</nav>
\ No newline at end of file
src/app/header/header.component.scss
......@@ -3,12 +3,26 @@
*{
font-family: 'Roboto', sans-serif;
}
nav{
position: fixed;
z-index: 1;
background-color: #fff;
width: 100%;
.logo img{
max-width: 240px;
}
.navbar-toggler{
.navbar-toggler-icon{
background: url("../../assets/img/menu.png");
background-repeat: no-repeat;
background-size: 100%;
width: 39px;
height: 45px;
}
}
.navbar-collapse{
margin-left: 25px;
ul{
.linec{
margin-top: 17px;
......@@ -21,7 +35,7 @@
width: 100%;
height: 100%;
text-align: center;
cursor: pointer;
}
......@@ -96,4 +110,4 @@
}
}
\ No newline at end of file
src/app/header/header.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
......@@ -7,9 +7,12 @@ import { Component, OnInit } from '@angular/core';
})
export class HeaderComponent implements OnInit {
constructor() { }
constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
}
goto(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
}
}
src/assets/responsive.scss
......@@ -114,40 +114,66 @@
}
//navbar scss
nav{
.navbar-collapse{
margin-left: 0px !important;
ul{
flex-direction: row !important;
flex-direction: block !important;
width: 300px;
.linec{
display: none;
}
li{
width: 75px !important;
a{
text-align: center !important;
}
}
}
.banner2_overlay2{
max-width: 100% !important;
background-size: cover !important;
.b2_over2_Contents{
padding: 20px 0px 20px 0px !important;
.row{
.col{
max-width: 100% !important;
padding-bottom: 15px !important;
}
}
.get_started{
padding-top: 15px !important;
}
.logo_block{
.logo_inline{
padding-left: 10px !important;
width: 150px !important;
}
text-align: start !important;
}
width: 100% !important;
.Text-Style {
color:blue !important;
margin-right: 25px;
padding: 10px 2px;
}
.Text-Style1 {
color:blue !important;
border: none !important;
width: 100% !important;
&:hover{
background:none !important;
} color:#ffff;
}
}
.join{
color:blue !important;
border: none !important;
margin-left: -8px !important;
width: 4px !important;
&:hover{
background:none !important;
}
}
.login{
margin-left: -9px !important;
color:blue !important;
}
}
}
}
}
......@@ -335,6 +361,73 @@ margin-top: 10px !important;
}
}
}
//scss for nav
nav{
.navbar-collapse{
margin-left: 5px !important;
ul{
width: 300px;
.linec{
display: none;
}
li{
width: 75px !important;
.nav-link{
// width: 100% !important;
}
.Text-Style {
color:blue !important;
margin-right: 25px;
padding: 10px 2px;
}
.Text-Style1 {
color:blue !important;
//border: none !important;
width: 100% !important;
&:hover{
// background:none !important;
} color:#ffff;
}
}
.join{
color:blue !important;
// border: none !important;
margin-left: -22px !important;
// width: 4px !important;
width: 59px !important;
height: 44px !important;
padding: 9px 10px !important;
&:hover{
// background:none !important;
}
}
.login{
margin-left: -9px !important;
color:blue !important;
}
}
}
}
}
/* 05.0 iPads (landscape) ----------- */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment