I wanna know why the logo is not showing on mobile devices, I tried resetting my network on phone, and reset web browser.I also try making the logo little smaller from 100px to 80px but still it's not showing. Here is the code below. Please Help Thanks is advance. Here is the working jsfiddle https://jsfiddle.net/light22/60xrbkhf/#&togetherjs=fHfHVyawIa
<header id="header" class="transparent-header" data-sticky-class="not-dark">
<div id="header-wrap" style="height:180px;">
<!-- Primary Navigation "
============================================= -->
<nav id="primary-menu" class="style-2 center">
<!--<div class="container clearfix"></div>-->
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<div style="text-align:center">
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" >
<li><div style="border-bottom:1px solid #000">Home</div></li>
<li><div>WHO WE ARE</div></li>
<li><div>WHAT WE TRADE</div></li>
<li><div>SERVICES</div></li>
<li><div>LOGISTICS</div></li>
<li><div>CONTACT</div></li>
</ul>
</div>
</nav><!-- #primary-menu end -->
<!-- Logo
============================================= -->
<div id="logo" class="divcenter">
<img class="divcenter" src="images/logo.png" alt="Canvas Logo">
<img class="divcenter" src="images/logo#2x.png" alt="Canvas Logo">
</div><!-- #logo end -->
<br>
</div>
</header><!-- #header end -->
Rename image in your images folder
1logo#2x.png to logo#2x.png
Related
I'm building a landing page and I encounter a problem. I have an image of a project that when is clicked will zoom in a gallery mode and on top of that image it is a link towards the Behance page of the project. But what ever I do when I click the project link is opening still the image gallery. This is my code:
<div class="row masonry-wrap">
<div class="masonry">
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<a href="images/portfolio/gallery/LiveStreaming.png" class="thumb-link" title="Live" data-size="1617x1440">
<img src="images/portfolio/LiveStream500x625.jpg" srcset="images/portfolio/LiveStream500x625.jpg 1x, images/portfolio/LiveStream1000x1250.jpg 2x" alt=""></a>
</div>
<a href="https://www.behance.net/gallery/77261419/Live-Streaming-Landing-Page-Design" class="item-folio__project-link" title="Project link">
Project Link
</a>
<div class="item-folio__text">
<h3 class="item-folio__title">
Live Streaming Landing Page
</h3>
<p class="item-folio__cat">
UI Design
</p>
</div>
<div class="item-folio__caption">
<p>A modern touch to a simple service. UI design made in Sketch for a Live Streaming Landing Page.</p>
</div>
</div>
<!-- end item-folio -->
</div>
<!-- end masonry__brick -->
</div>
<!-- end masonry -->
</div>
<!-- end masonry-wrap -->
What do I do wrong?
I've started my new feminist blog. Sadly, the logo does not look good at all. I've tried to remove the shadow, but it doesn't helped at all. Here is how it looks like (up) and how I want it to look like (down):
Both logos
But I don't know how to do it. Here is the HTML code of my blog: view-source:https://glenn-gleich.blogspot.de/. This is what I have tried. I think I have to change following:
<!-- Begin header content -->
<div class='header-content'>
<!-- Begin Main Logo -->
<div class='main-logo'>
<div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Glenn
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
</div><!-- /.main-logo -->
<!-- End Main Logo -->
I think it should be substituted with something like this:
<div class='item-thumbnail'>
<img alt='' border='0' height='72' src='https://3.bp.blogspot.com/address_to_image/name.jpg' width='72'/>
</a>
</div>
I hope you can help me.
<h1 class='title' style="color: #000">
<span style="background: #000; color: #fff; padding-left: 5px; padding-right: 5px; margin-right: 2px;">G</span>lenn
</h1>
This would give the desired result, you can change it a little to your preferences.
Note: Do not use styles! I did it to make it easier to read, but you should put it in a .css file.
I'm having a bit o dificulty making this work.
This is my first website, I'm using Zurb and finding it good so far.
I'm trying to implement a responsive nav, but it isn't working. The one I'm trying is this one: http://responsive-nav.com/#instructions. I made everything they ask to, but it still don't work. It's the same as not adding code at all to the website.
Some of the nav's code, if it helps:
<div class="row" id="row-top">
<div class="large-4 small-8 columns logo">
<img src="img/logo.png" alt="Laboratório Morales">
</div> <!-- logo -->
<div class="large-8 small-12 columns nav">
<ul class="inline-list menu-principal">
<li>Laboratório</li>
<li>Exames</li>
<li>Convênios</li>
<li>Estrutura</li>
</ul> <!-- menu-principal -->
</div> <!-- menu-principal div -->
</div> <!-- row topo -->
Calling in the head, and bottom of body:
<link rel="stylesheet" href="css/responsive-nav.css"> <!-- responsive nav -->
<script src="js/responsive-nav.js"></script> <!-- responsive nav -->
<script>
var navigation = responsiveNav("#nav");
</script> <!-- responsive nav -->
Hm ... you are passing an id #nav. But you put nav in the class property. It should be
<div class="large-8 small-12 columns" id="nav">
Isn't it?
HTML
<div class="row-fluid" id="content-row">
<div class="span12">
<div class="row-fluid">
<div class="span4" id="home-logo">
<img src="img/layout/logo.png" id="logo">
<ul id="subnav">
<!-- Loaded via AJAX -->
</ul>
</div><!-- ./span4 -->
<div class="span8" id="home-copy">
<p id="home-p">
Foxcode is an investment and merchant banking Firm which advises and invests in small to mid-market companies and projects globally.
</p>
</div><!-- ./span8 -->
</div><!-- ./row-fluid -->
</div><!-- span12 -->
</div><!-- ./row-fluid -->
I try to set #subnav{margin-left: } or #subnav li{margin-left: } to control the element position so it goes to the right a little bit, but nothing happens when I try to.
Concerned element
<ul id="subnav">
<!-- Loaded via AJAX -->
</ul>
Try adding to your CSS:
#subnav{
padding:0px;
margin:0px;
margin-left:10px;
}
JSFiddle
I'm new and i have a question about CSS3 and :empty pseudo-class.
I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:
#my_sidebar:empty { display:none;}
For display it when isn't empty i wrote
#my_sidebar:not(:empty) { display:block; }
This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?
Thanks! (excuse me for my terryfing english!!)
EDIT:
the html page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1>Project Management</h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and css:
.sidebar {
float:right;
width: 36%;
text-align:left;
}
The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).
As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)