Logo link not working and font icons now showing up

Report · Apr 24, 2017

I have two issues. I will preface this by saying my client wanted a certain bootstrap template. But then decided to have me change about 95% of it! I SHOULD just start from scratch but so far into it - I may redo it when I have time. But my issues are:

1) I want to use the logo as a link back to index.html. It's coded properly, but I am not able to click on it. Do I need to change the z-index maybe?

2) The template used fontawesome. When you adjust the browser window smaller, the typically 'hamburger' icon is missing. In fact, other icons throughout the site are not showing up either. I've checked all files are on server, but maybe in the course of changing sitewide styles (due to the extensive theme changes) I may have screwed something up? Thanks in advance.

See link below.

Forget-Me-Not Fund: Dedicated to Alzheimer's Education, Awareness & Research

Report · Apr 24, 2017

Logo link works for me. Clear your browser's cache and try again. Or try it with a different browser.

Font Awesome icons require a link to the Font Awesome library. I don't see one in your <head> tag.

You can use this one hosted on Max CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

Font Awesome Examples

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 24, 2017

Yes, z-index - add it to your css selector:

.main-header .lower-section .logo {

position: relative;

float: left;

padding: 12px 0px;

z-index: 1000;

}

Incidentally how do you work with garbage coding like this? It would drive me to suicide, no kidding. I'd rather stick pins in my eyes than work like that.

Report · Apr 24, 2017

Younhave 2 links to the same Bootstrap version:

and this junk in your css file (lots of it). Its complete trash the •••••• coding is complete trash.

@import url('file:///Macintosh HD/Users/tbruck/Library/Caches/TemporaryItems/Adobe/Dreamweaver CC 2017/font-awesome.css');

@import url('file:///Macintosh HD/Users/tbruck/Library/Caches/TemporaryItems/Adobe/Dreamweaver CC 2017/animate.css');

@import url('file:///Macintosh HD/Users/tbruck/Library/Caches/TemporaryItems/Adobe/Dreamweaver CC 2017/owl.css');

@import url('file:///Macintosh HD/Users/tbruck/Library/Caches/TemporaryItems/Adobe/Dreamweaver CC 2017/jquery.mCustomScrollbar.min.css');

@import url('file:///Macintosh HD/Users/tbruck/Library/Caches/TemporaryItems/Adobe/Dreamweaver CC 2017/jquery.fancybox.css');

@import url('file:///Macintosh HD/Users/tbruck/Library/Caches/TemporaryItems/Adobe/Dreamweaver CC 2017/hover.css');\

.page-outer-container{

position:relative;

width:100%;

padding:0px 0px;

background:#1c1c1c url(file:///Macintosh%20HD/Users/tbruck/Library/Caches/TemporaryItems/Adobe/images/background/bg-pattern.jpg) left top repeat;

}

.main-menu .navigation > li > a:before{

content:'';

position:absolute;

left:0px;

top:0px;

width:100%;

height:10px;

background:url(file:///Macintosh%20HD/Users/tbruck/Library/Caches/TemporaryItems/Adobe/images/icons/active-bars-icon.png) center top no-repeat;

opacity:0;

-webkit-transition: all 500ms ease;

-ms-transition: all 500ms ease;

-o-transition: all 500ms ease;

-moz-transition: all 500ms ease;

transition: all 500ms ease;

}

.main-menu .navigation li.dropdown .dropdown-btn{

position:absolute;

right:10px;

top:6px;

width:34px;

height:30px;

border:1px solid #ffffff;

background:url(file:///Macintosh%20HD/Users/tbruck/Library/Caches/TemporaryItems/Adobe/images/icons/submenu-icon.png) center center no-repeat;

background-size:20px;

cursor:pointer;

z-index:5;

display:none;

-webkit-border-radius:3px;

-ms-border-radius:3px;

-o-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

}

Report · Apr 24, 2017

Good catch.

It looks like the OP is not working in a defined local site folder -- evidenced by all the incorrect link paths to files on the hard drive.

file:///Macintosh%20HD/Users/tbruck/

When documents are saved & the site is defined properly, link paths should resolve to assets in the local site folder.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 24, 2017

Ok I'm really scratching my head at all those references to my local drive. What could I have done for that to happen? It appears it is in reference to a lot of background images that I've never touched, altered, etc. I set up the site properly in the beginning: SITE>New Site and point it to the site folder. Again, thank you for your help on this.

Report · Apr 24, 2017

I started with an online donation site the client found and wanted to use. But honestly, it just makes things a nightmare (not that I'm blaming it ALL on the template... ). I seriously just need to recreate – it's not that large of a site. Thanks for the feedback.

Report · Apr 24, 2017

Oh well at least you've confirmed 'it makes things a nightmare'. Never really did see the benefit myself of using other developers complete coding to produce a website, as each developer writes coding differently. Maybe a splash or two of other developers coding you can cope with but plus the nightmare of Bootstrap makes it a frustrating workflow I would assume, hell I have enough trouble with my own code at times, let alone a whole raft of someone elses.

Your logo is still not clickable at desktop format. Its only clickable when the layout hides your main navigation which would suggest that part of the main navigation container is overlaying the logo conatiner, making it non-clickable. Using z-index should sort that out.

Not sure what you have done to have the so teh file pointing back to you local set up. If you say you defined the site folder at the outset then at some stage you must have updated the links for some reason and they all got corrupted.

On the plus side the actual homepage design looks pleasing enough. Needs a bit of padding top and bottom on the 'Twiggs Forget Me Not Soda' container to give it a bit of breathing space - a few minor tweaks like that which can make or break a layout.

Report · Apr 25, 2017

Yes, the Z-index fixed it! Huge thanks to you and Nancy... it's very much appreciated. At the risk of saying too much and looking stupid – I'm a graphic designer who in 1996 decided to learn html. And that is how I started – writing in code and designing that way (then moving on to GoLive) . I was able to create a great design and use tables to make a site that looked more like a print design. Well, it's just not that simple anymore. For years I wasn't even sure where to invest my time when choosing a responsive framework! When I decided on Bootstrap, it wasn't something that was very intuitive, and the learning curve is pretty steep. So to summarize, I really appreciate your and Nancy's feedback. It's painfully clear that there is no shortcut . So thanks! BTW I'm having quirky things going on with my template file. I've had to go back to old saved versions and update links due to an error I dmxzone's slider (which adds duplicate/multiple bootstrap files), which I finally uninstalled. Then I have no issues... but have another mess to figure out.

Adobe Community

Logo link not working and font icons now showing up

1 Correct answer