Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jack Spangenberg
643 PointsBS4: When adding fixed-top to navbar, color/style disappears!
I have this code:
Warning: Messy code at the bottom
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<link href="./css/prism.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<title>smocksCODE</title>
</head><!--Nav-->
<body data-spy="scroll" data-target="#navbar" id="body">
<div class="nav-bg">
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-inverse" id="navbar">
<a class="navbar-brand" href="#">smocksCODE</a>
<div class="navbar-collapse justify-content-end" id="navCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#body">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#h-1">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#h-2">SCSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#h-3">File Structure</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!--/Nav-->
<!--Jumbotron-->
<div class="jumbotron vertical-center mb-0" style="background-image: -webkit-linear-gradient(315deg,#271b38,#563d7c,#7952b3); width: 100%; border-radius: 0; color: white; height: 500px; text-align: center;">
<div class="vc">
<i class="fa fa-code fa-3x fa-border"></i>
<h3 class="display-3 pt-3 hidden-sm-down">smocksCODE</h3>
<div aria-label="buttons" class="btn-group pt-3" role="group">
<button class="btn btn-warning" type="button">Download</button> <button class="btn btn-primary" type="button">View Code</button>
</div>
</div>
</div>
<!--/Jumbotron-->
<!--Code Cards-->
<div class="container-fluid" style="background-color: #F0D3F7;">
<div class="row">
<div class="col-md-6 my-5">
<div class="card">
<div class="card-header" id="h-1">
HTML [CDN] <a data-clipboard-target="#html-code" href="#h-1"><i class="fa fa-clipboard fa-border float-right" style="border: 1px solid grey;"></i></a>
</div>
<div class="card-block">
<pre>
<code class="language-html" id="html-code">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
</code></pre>
</div>
</div>
</div>
<div class="col-md-6 my-5">
<div class="card">
<div class="card-header" id="h-2">
SCSS [Uncompiled] <a data-clipboard-target="#scss-code" href="#h-2"><i class="fa fa-clipboard fa-border float-right" style="border: 1px solid grey;"></i></a>
</div>
<div class="card-block">
<pre>
<code class="language-css" id="scss-code">
$bs4-primary: #0275d8 !important;
$bs4-muted: #636c72 !important;
$bs4-success: #5cb85c !important;
$bs4-info: #5bc0de !important;
$bs4-danger: #d9534f !important;
$bs4-warning: #f0ad4e !important;
$bs4-white: #fff !important;
</code></pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-5">
<div class="card">
<div class="card-header" id="h-3">
File Structure <a data-clipboard-target="#plain-code" href="#h-2"><i class="fa fa-clipboard fa-border float-right" style="border: 1px solid grey;"></i></a>
</div>
<div class="card-block">
<pre>
<code class="language-plaintext" id="plain-code">
folder 	├──css 	│  └──compiled.css 	├──index.html 	├──js 	│  └──app.js 	└──scss 	 └── uncompiled.scss
</code>
</pre>
</div>
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card">
<h4 class="card-header">Conclusion</h4>
<div class="card-block">
<h4 class="card-title">To wrap it up...</h4>
<p class="card-text my-2">I do not clame ownership of any of the code on this page. This is simply a library of code for easy, public use. Make sure to use the clipboard icon to copy code to your clipboard. Feel free to contact me.</p>
<h6 class="card-title py-2">Credit:</h6>
<ul>
<li class="py-1">Bootstrap 4</li>
<li>FontAwesome</li>
<li class="py-1">jQuery</li>
<li>Tether</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--/Code Cards-->
<div class="footer" style="width: 100%; height: 50px; color: white; background-color: #D17B88; text-align: center; font-size: 75%; font-family: 'Slabo 27px', serif;">
<p class="cv">site by simplism/smocks</p>
</div>
<!--CSS/Scripts-->
<style>
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
html,
body{
width:100%;
overflow-x:hidden;
}
}
.nav-bg {
background-color: #34495e;
}
.nav-link {
margin: 5px 0;
}
.navbar-inverse .navbar-toggler {
cursor: pointer;
}
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
}
a {
text-decoration: none;
color: black;
border: none;
}
.cv {
position: relative;
top: 50%;
transform: translateY(-50%);
align-content: center;
}
</style>
<script src="./app.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script>
new Clipboard('a');
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<script src="./js/prism.js">
</script>
</body>
</html>
When I added fixed-top to my navbar, the background and positioning disappears. Please help.
1 Answer
Ezra Siton
12,644 PointsThis code works fine. You must follow real working examples -
<div class="nav-bg" style="
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
">
https://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/
workspaces
Also, learn about workspaces. It's hard to help you like this :) The best way is to upload HTML version of your problem (not copy-paste like you do) https://teamtreehouse.com/library/using-treehouse-workspaces
Jack Spangenberg
643 PointsJack Spangenberg
643 PointsWill do! Thanks Ezra.. again. I was under the impression it was a class on the
navelement but I forgot there was a parent.