basic menu
parent
8d00aaa686
commit
879a63d315
|
@ -6,6 +6,29 @@
|
|||
</div>
|
||||
<div class="menu">
|
||||
<div class="container">
|
||||
<div class="logo" ng-include="'assets/img/do.svg'"></div>
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<a class="navbar-brand" href="#" ng-include="'assets/img/do.svg'"></a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Community</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Tutorials</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Questions</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Get Involved</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -73,19 +73,44 @@ body.layout-do {
|
|||
.menu {
|
||||
padding: 10px 0;
|
||||
|
||||
.logo {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 3px;
|
||||
width: 47px;
|
||||
height: 47px;
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
.navbar {
|
||||
padding: 0;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-45%, -50%);
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 3px;
|
||||
width: 47px;
|
||||
height: 47px;
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-45%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
margin-right: 30px;
|
||||
|
||||
&.active {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
|
||||
.nav-link {
|
||||
color: #99a1b3;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #031b4e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
@import '../../../node_modules/bootstrap/scss/input-group';
|
||||
@import '../../../node_modules/bootstrap/scss/custom-forms';
|
||||
@import '../../../node_modules/bootstrap/scss/nav';
|
||||
// @import '../../../node_modules/bootstrap/scss/navbar';
|
||||
@import '../../../node_modules/bootstrap/scss/navbar';
|
||||
@import '../../../node_modules/bootstrap/scss/card';
|
||||
// @import '../../../node_modules/bootstrap/scss/breadcrumb';
|
||||
// @import '../../../node_modules/bootstrap/scss/pagination';
|
||||
|
|
Loading…
Reference in New Issue