basic menu

pull/125/head
Bálint Szekeres 2019-10-14 00:50:02 +02:00
parent 8d00aaa686
commit 879a63d315
3 changed files with 62 additions and 14 deletions

View File

@ -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>

View File

@ -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;
}
}
}
}

View File

@ -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';