0

I've got a logo and a second elements that are contained in divs sitting in the nav that I want to make links. Tried what seems like everything. It looks like the .logo svg div is linking but is running the full width of #topnav and the area with .logo is not clickable. The .nav container about div is not linking at all and I can't seem to get it to right align in the nav.

There are probable a few issues here (apologize for that) but any suggestions at all would be most appreciated.

HTML

<div id="topbar">
        <a href="##">
            <div class="logo svg">
                <object class="logo" type="image/svg+xml" data="img/gf_logo_main.svg">
                </object>
            </div>
        </a>
        <a href="###">
            <div class="nav container about">
                <object class="nav about" type="image/svg+xml" data="img/question mark.svg">
                </object>
            </div>
        </a>
    </div>

CSS

    #topbar {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 65px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    color: #000;
}

.logo svg {
    float: left;
    width: 50px;
}

.logo {
    height: 80%;
}

.logo img {
    border: 0;
    display: none;
    height: 100%;
    width: 100%;
}

.nav container about {
    position: absolute
    right: 0px;
}

.nav link about{
    height: 80%;
    }

Page is here:

http://www.glitteringfacade.com

2 Answers 2

1

You don't need to use <object> tags for SVG any more. Since IE9, you can just inline it as a normal <img> (but be sure to specify its width and height, either as attributes or in CSS).

<a href="#" class="logo svg"><img src="img/gf_logo_main.svg"></a>
5
  • Thanks Blazemonger. Not sure if I implemented correctly but now the logo does not appear at all. HTML ` <div id="topbar"> <a href="#" class="logo svg"><img src="img/gf_logo_main.svg"></a> </div>` CSS .logo svg { float: left; width: 100%; height: 100%; }
    – M Hamilton
    Dec 1, 2015 at 21:02
  • You also need to reorganize your CSS accordingly. .logo svg no longer exists, and for some reason you had class="logo" on both the container div and the svg element. Dec 1, 2015 at 21:24
  • Sorry. I'm not following you. I am only using .logo svg now.
    – M Hamilton
    Dec 1, 2015 at 21:41
  • I think you meant to use .logo.svg or .logo .svg in your stylesheet? Dec 1, 2015 at 22:23
  • Got it. Yes. Thanks Blazemonger.
    – M Hamilton
    Dec 1, 2015 at 22:45
0

You can make it a "link" using onclick="window.location = 'http://www.yoururl.com';" in your div tag and giving it the cursor: pointer; CSS style.

2
  • This "works" but its a hack that shouldn't be used if there's a better option (like Blazemonger's answer)
    – bcr
    Dec 1, 2015 at 15:48
  • Thanks guys. Tried the first option to no avail.
    – M Hamilton
    Dec 1, 2015 at 21:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.