NeilBrommer/NewTabPage
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Move the buttons so they are shown in the navbar

Browse source 
Rather than below it
This commit is contained in:
Neil Brommer 2017-12-09 22:04:58 -08:00
parent a248d028ff
commit 13e5fc9025
2 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -17,18 +17,18 @@
<body> <body>
<nav class="navbar navbar-dark bg-dark mb-4"> <nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand"></span> <span class="navbar-brand"></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse mt-2" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<form class="form-inline mt-2 mt-md-0"> <form class="form-inline">
<button class="btn btn-light ml-2" type="button" data-Toggle="modal" data-target="#aboutModal">About</button> <button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#aboutModal">About</button>
<button class="btn btn-light ml-2" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button> <button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button>
<button id="btnEdit" class="btn btn-light ml-2" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button> <button id="btnEdit" class="btn btn-light mr-2 my-1 my-sm-0" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button>
<button class="btn btn-light ml-2" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fa fa-exclamation-circle"></span> Add</button> <button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fa fa-exclamation-circle"></span> Add</button>
</form> </form>
</div> </div>
</nav> </nav>

6
main.css
View file

@ -31,6 +31,12 @@ body {
background: transparent !important; background: transparent !important;
} }
/* Move the navbar contents onto the same line as the toggler */
#navbarCollapse {
margin-top: -3rem !important;
margin-right: 50px;
}
/* set the width of the main container based on element width */ /* set the width of the main container based on element width */
@media (max-width: 34em) { @media (max-width: 34em) {
#wrapper { #wrapper {