Skip to content

GitLab

Unverified Commit e672383d authored by David Haynes's avatar David Haynes
Browse files

Alright I think I'm happy with the navbar now 

- comments, spaces all work out, everything it 👌 to move on
parent 5c9f1082
Pipeline #1044 passed with stage
in 57 seconds
Hide whitespace changes
Inline Side-by-side
assets/css/custom.css
View file @ e672383d
body {
padding-top: 100px
}
body>.navbar { body>.navbar {
-webkit-transition: background-color .3s ease-in; -webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in transition: background-color .3s ease-in
......
index.html
View file @ e672383d
<!-- HTML5 definition --> <!-- HTML5 definition -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<!-- Header content --> <!-- Header content -->
<head> <head>
<!-- Metatags --> <!-- Metatags -->
<meta charset="utf-8"> <meta charset="utf-8">
...@@ -40,23 +37,31 @@ ...@@ -40,23 +37,31 @@
</head> </head>
<!-- Body content --> <!-- Body content -->
<body> <body>
<!--non-collapse: container, collapse: no container-->
<!-- Define the navbar with the primary background color --> <!-- Define the navbar with the primary background color -->
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary"> <nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse"> <!-- Responsive toggle button -->
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target=".dual-collapse">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<!-- Containter for main navbar content -->
<div class="container"> <div class="container">
<a class="navbar-brand d-flex mx-auto" href="#"><img src="/assets/img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap&nbsp;&nbsp;</a>
<!-- Brand logo + title -->
<a class="navbar-brand d-flex mx-auto" href="#">
<img src="/assets/img/SRCT_square.svg" width="30" height="30"
class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap&nbsp;&nbsp;
</a>
<!-- Elements that will be collapsed in responsive mode -->
<div class="navbar-collapse collapse dual-collapse"> <div class="navbar-collapse collapse dual-collapse">
<!-- Unordered list of elements -->
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<!-- Example nav-item --> <!-- Example nav-item -->
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="">Example nav-link</a> <a class="nav-link" href="">Example nav-link</a>
...@@ -64,38 +69,64 @@ ...@@ -64,38 +69,64 @@
<!-- Example dropdown including links to source files --> <!-- Example dropdown including links to source files -->
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Source files&nbsp;<span class="caret"></span></a>
<!-- Dropdown for source files -->
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
id="download">Source files<span class="caret"></span>
</a>
<!-- Rounded dropdown-menu -->
<div class="rounded dropdown-menu"> <div class="rounded dropdown-menu">
<!-- Example dropdown-item -->
<a class="dropdown-item" href="#">Open in JSFiddle (TODO)</a> <a class="dropdown-item" href="#">Open in JSFiddle (TODO)</a>
<!-- Divider divides content in the dropdown-menu -->
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="/masonstrap/masonstrap.min.css" target="_blank">masonstrap.min.css</a>
<a class="dropdown-item" href="/masonstrap/masonstrap.css" target="_blank">masonstrap.css</a> <!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.min.css"
target="_blank">masonstrap.min.css
</a>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.css"
target="_blank">masonstrap.css
</a>
<!-- Divider divides content in the dropdown-menu -->
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="/masonstrap/_variables.scss" target="_blank">_variables.scss</a>
<a class="dropdown-item" href="/masonstrap/_masonstrap.scss" target="_blank">_masonstrap.scss</a> <!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_variables.scss"
target="_blank">_variables.scss
</a>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_masonstrap.scss"
target="_blank">_masonstrap.scss
</a>
</div> </div>
</li> </li>
</ul> </ul>
<!-- Unordered list of elements, with margin-left: auto -->
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<!-- Example nav-item -->
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<!-- Example nav-item -->
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
</ul> </ul>
</div> </div>
<!--<a class="navbar-brand d-flex mx-auto" href="#"><img src="/assets/img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap</a>-->
</div> </div>
</nav> </nav>
<br></br>
<!-- Begin giant container for the entirety of the page content --> <!-- Begin giant container for the entirety of the page content -->
<div class="container"> <div class="container">
...@@ -137,7 +168,9 @@ ...@@ -137,7 +168,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="navbars">Navbars<hr /></h1> <h1 id="navbars">Navbars
<hr />
</h1>
</div> </div>
<div class="bs-component"> <div class="bs-component">
...@@ -213,7 +246,9 @@ ...@@ -213,7 +246,9 @@
<div class="page-header"> <div class="page-header">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<h1 id="buttons">Buttons<hr /></h1> <h1 id="buttons">Buttons
<hr />
</h1>
</div> </div>
</div> </div>
</div> </div>
...@@ -389,7 +424,9 @@ ...@@ -389,7 +424,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="typography">Typography<hr /></h1> <h1 id="typography">Typography
<hr />
</h1>
</div> </div>
</div> </div>
</div> </div>
...@@ -472,7 +509,9 @@ ...@@ -472,7 +509,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="tables">Tables<hr /></h1> <h1 id="tables">Tables
<hr />
</h1>
</div> </div>
<div class="bs-component"> <div class="bs-component">
...@@ -542,7 +581,9 @@ ...@@ -542,7 +581,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="forms">Forms<hr /></h1> <h1 id="forms">Forms
<hr />
</h1>
</div> </div>
</div> </div>
</div> </div>
...@@ -698,7 +739,9 @@ ...@@ -698,7 +739,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="navs">Navs<hr /></h1> <h1 id="navs">Navs
<hr />
</h1>
</div> </div>
</div> </div>
</div> </div>
...@@ -921,7 +964,9 @@ ...@@ -921,7 +964,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="indicators">Indicators<hr /></h1> <h1 id="indicators">Indicators
<hr />
</h1>
</div> </div>
</div> </div>
</div> </div>
...@@ -994,7 +1039,9 @@ ...@@ -994,7 +1039,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="progress">Progress<hr /></h1> <h1 id="progress">Progress
<hr />
</h1>
</div> </div>
<h3 id="progress-basic">Basic</h3> <h3 id="progress-basic">Basic</h3>
...@@ -1071,7 +1118,9 @@ ...@@ -1071,7 +1118,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="containers">Containers<hr /></h1> <h1 id="containers">Containers
<hr />
</h1>
</div> </div>
<div class="bs-component"> <div class="bs-component">
<div class="jumbotron"> <div class="jumbotron">
...@@ -1266,7 +1315,9 @@ ...@@ -1266,7 +1315,9 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="page-header"> <div class="page-header">
<h1 id="dialogs">Dialogs<hr /></h1> <h1 id="dialogs">Dialogs
<hr />
</h1>
</div> </div>
</div> </div>
</div> </div>
......
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