@khaduch Hi, I'm still having trouble.
hosted my site homepage displays like this
https://ibb.co/gbgbEn
When hosted on git pages it looks like this
https://ibb.co/eWsiun
https://github.com/liamdocherty/liamdocherty.github.io
Could it have something to do with these console errors? I have no idea how to fix them though.
liamdocherty.github.io/:108 Mixed Content: The page at 'https://liamdocherty.github.io/' was loaded over HTTPS, but requested an insecure image 'http://www.coolhdwallpapers.net/gallery/adidas-logo-black-background-wallpaper.jpg'. This content should also be served over HTTPS.
liamdocherty.github.io/:113 Mixed Content: The page at 'https://liamdocherty.github.io/' was loaded over HTTPS, but requested an insecure image 'http://www.gsfdcy.com/data/img/67/1913982-polo-wallpaper.jpg'. This content should also be served over HTTPS.
liamdocherty.github.io/:14 GET https://liamdocherty.github.io/css/animate.css net::ERR_ABORTED
liamdocherty.github.io/:15 GET https://liamdocherty.github.io/bower_components/Morphext/dist/morphext.css net::ERR_ABORTED
liamdocherty.github.io/:20 GET https://liamdocherty.github.io/CSS/design.css net::ERR_ABORTED
liamdocherty.github.io/:21 GET https://liamdocherty.github.io/CSS/media_queries.css net::ERR_ABORTED
liamdocherty.github.io/:224 GET https://liamdocherty.github.io/JS/smooth-scroll-master/dist/js/smooth-scroll.js net::ERR_ABORTED
liamdocherty.github.io/:226 GET https://liamdocherty.github.io/JS/javascript.js net::ERR_ABORTED
(index):224 GET https://liamdocherty.github.io/JS/smooth-scroll-master/dist/js/smooth-scroll.js net::ERR_ABORTED
:star2: 1412 | @sorinr |http://www.freecodecamp.org/sorinr
:star2: 3842 | @khaduch |http://www.freecodecamp.org/khaduch
:star2: 9158 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Why isn't my navbar appearing on my website? I have reviewed my HTML, CSS AND JS and can't seem to identify the problem.
https://github.com/liamdocherty/liamdocherty.github.io
https://liamdocherty.github.io
HTML
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home.html">Home</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#about.html">About</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#portfolio.html">Portfolio</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#about.html">Price</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
CSS
/*==================================
= navbar =
==================================*/
.navbar {
display: none;
background-color: #f7f7f7;
}
nav ul li a {
font-family: Montserrat, Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #000;
}
nav ul li:after {
text-decoration: underline;
color: #000;
}
.navbar-brand {
text-transform: uppercase;
color: #000;
}
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50);
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
JS
var scroll = new SmoothScroll('a[href*="#"]');
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$('.navbar').css('display', 'flex') // display: flex
} else {
$(".navbar").hide();
}
});
});