NavBar logo does not appear on Foundation 6 dist
Question
Foundation 6: NavBar logo works locally on my machine but when I upload to server it does not appear. Site: www.adolfobarreto.atwebpages.com
I've searched through the code and can find no errors. Any Ideas?
Thanks Adolfo
Html:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
<a class="logo-small show-for-small-only" href="#"><img src="\assets\img\fingerLogoXS.gif" /></a>
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<nav class="top-bar" id="nav-menu">
<div class="logo-wrapper hide-for-small-only">
<div class="logo">
<img src="\assets\img\fingerLogosm.gif">
</div>
</div>
<!-- Left Nav Section -->
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<!-- Right Nav Section -->
<div class="top-bar-right">
<ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
<li class="has-submenu">
<a href="#">Menu 4</a>
<ul class="submenu menu vertical medium-horizontal" data-submenu>
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Menu 5</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--End Main Navigation-->
<br />
<br />
<div class="row">
<div class="medium-4 columns">
<img src="http://placehold.it/450x183&text=LOGO" alt="company logo">
</div>
<div class="medium-8 columns">
<img src="http://placehold.it/900x175&text=Responsive Ads - ZURB Playground/333" alt="advertisement for deep fried Twinkies">
</div>
</div>
</header>
<br>
<div class="row">
<div class="medium-8 columns">
<p><img src="\assets\img\finger.jpg" alt="main article image"></p>
</div>
<div class="medium-4 columns">
<p><img src="\assets\img\seo2.gif" alt="article promo image" alt="advertisement for deep fried Twinkies"></p>
<p><img src="\assets\img\responsive.jpg" alt="article promo image"></p>
</div>
</div>
<hr>
<footer>
<div class="row expanded callout secondary">
<div class="large-4 columns">
<h4>Portfolio Images</h4>
<div class="row small-up-4">
<div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
<div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
<div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
<div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
<div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
<div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
<div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
<div class="column"><img class="thumbnail" src="http://placehold.it/75" alt="image of space dog"></div>
</div>
</div>
<div class="large-4 columns">
<h4>Mission</h4>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste magnam a quam voluptates aliquam cum, quisquam
tempora sapiente minus, eos modi. Quia enim, doloremque deleniti. Voluptate nemo facilis, dignissimos temporibus.
</P>
</div>
<div class="large-4 columns">
<h4>Technologies</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique
molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi
aliquam.
</p>
</div>
</div>
</div>
<div class="row">
<div class="medium-6 large-6 columns">
<ul class="menu align-left">
<li><a href="#">Legal</a></li>
<li><a href="#">Partner</a></li>
<li><a href="#">Explore</a></li>
</ul>
</div>
<div class="medium-6 large-6 columns">
<ul class="menu align-right">
<li class="menu-text">Copyright © 2016 Adolfo Barreto</li>
</ul>
</div>
</div>
</footer>
<script src="assets/js/app.js"></script>
</body>
</html>
SCSS:
//Navigation
//__________
/* Small Navigation */
.logo-small {
float: right;
}
.title-bar {
padding: 0 .5rem;
}
.menu-icon,
.title-bar-title {
position: relative;
top: 10px;
}
/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) {
.logo-wrapper {
position: relative;
}
.logo-wrapper .logo {
width: 92px;
height: 92px;
position: absolute;
left: 50%;
right: 50%;
top: -6px;
margin-left: -46px;
}
// Right part
.top-bar-right {
width: 50%;
padding-left: 60px;
}
.top-bar-right ul {
float: left;
}
// Left part
.top-bar-left {
width: 50%;
padding-right: 60px;
}
.top-bar-left ul {
float: right;
}
}
.menu-text {
color: deepskyblue;
}
#footer-sep {
padding: 1em;
}
1 answers
solution1
1 ACCPTED 2016-01-05 20:03:53
All your image paths use backslashes instead of forward slashes. Never use backslashes in paths, no matter if they are absolute, relative, or root relative paths.
BTW the link to your website does not work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Logo does not appear on bootstrap navbar
Boostrap Navbar with logo - Logo does not appear in the same row as links
Logo does not fit navbar
I cant get my logo to appear on the navbar
Navbar logo won't appear (bootstrap/django)
Why does my navbar appear to be floating?
Why does my navbar appear on top of scrollbar?
Bootstrap 3 Navbar toggle - collapses but button does not appear
The .navbar-toggler-icon does not appear
Bootstrap 4 navbar-toggler-icon does not appear
Related Tags