zoriya/RaccoonWebsite
1
0
Fork 0
mirror of https://github.com/zoriya/RaccoonWebsite.git synced 2025-12-05 23:46:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Making navbar work with desktop.

Browse Source
This commit is contained in:
Tristan Roux
2019-01-13 17:01:13 +01:00
parent 30bfaf42ed
commit 2b0135cf3b
4 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
fragments/navBar.html
View File

@@ -1,23 +1,40 @@
<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-primary" >
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".nav-content">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".mobile-nav" style="position: absolute;">
<span class="navbar-toggler-icon"></span>
</button>
<img width="40px" src="drawables\raccoon.svg" style="left: 0; right: 0; top: 0; bottom: 0; margin: auto;"/>
<ul class="navbar-nav nav-content" style="position: absolute; right: 50%;">
<ul class="navbar-nav d-none d-md-flex" style="position: absolute; right: 50%;">
<li class="navbar-item active">
<a href="\" class="nav-link">MusicApp</a>
</li>
<li class="navbar-item" style="margin-right: 50px">
<a href="magical-garden" class="nav-link">Magical Garden</a>
</li>
</ul>
<ul class="navbar-nav d-none d-md-flex" style="position: absolute; left: 50%;">
<li class="navbar-item" style="margin-left: 50px">
<a href="switching-personalities" class="nav-link">Switching Personalities</a>
</li>
<li class="navbar-item">
<a href="other" class="nav-link">Other</a>
</li>
</ul>
</nav>
<div class="mobile-nav navbar-dark bg-primary collapse d-md-none">
<ul class="navbar-nav">
<li class="navbar-item active">
<a href="\" class="nav-link" style="text-align: center;">MusicApp</a>
</li>
<li class="navbar-item" style="margin-right: 50px">
<li class="navbar-item">
<a href="magical-garden" class="nav-link" style="text-align: center;">Magical Garden</a>
</li>
</ul>
<ul class="navbar-nav nav-content" style="position: absolute; left: 50%;">
<li class="navbar-item" style="margin-left: 50px">
<li class="navbar-item">
<a href="switching-personalities" class="nav-link" style="text-align: center;">Switching Personalities</a>
</li>
<li class="navbar-item">
<a href="other" class="nav-link" style="text-align: center;">Other</a>
</li>
</ul>
</nav>
</div>

4
index.html
View File

@@ -8,13 +8,13 @@
<link rel="shortcut icon" type="image/png" href="drawables\icon.png"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet/scss" href="style.scss" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="nav" />
<p>t</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

0
style.css Normal file
View File

14
style.scss
View File

@@ -1,14 +0,0 @@
/* Navigation bar */
.nav-content
{
display: none;
background-color: #00ff00;
}
@include media-breakpoint-up(sm)
{
.nav-content
{
display: flex;
background-color: #ff0000;
}
}