How to add a nav caret above a button?

Posted on 2010-01-05
Last Modified: 2012-05-08
I was wondering how to add the image, which I have attached, to each one of the buttons when each one of the buttons is active. For example when I hit the about button i want that image to show up above the button. The image is just a caret. I want it to blend into the main content area.
I have also attached the source code and css. I just want to know how to add this to the css for this to work. Now to set the state to active I do use jquery if you need that file just let me know.

Question by:askurat1
    LVL 7

    Expert Comment

    Do you have a demo site online we could see?
    Do you have a printscreen of what you have vs. what you want?
    LVL 6

    Accepted Solution

    This one's going to be a little involved...

    From your previous post you've got your buttons working - when the list-item is cilcked its style is changed.  That style has a background image set to it, so we can't have another one.

    You start with two options...

    Either style the anchor tag inside of the list item or, <li...><a ... class="caret">...</a></li>
    create another div inside the list item, but outside the anchor  <li...><div...><a...>...</a></div></li>

    You're using jQuery, so whatever route you take will be just as easy to do as the other.

    If you choose to style the anchor tag you need to be aware that the menu title texts aren't the same width, so the caret may appear in different places - maybe to the left, maybe to the right.

    So whatever route you take, you should use a block element (something that takes up the entire width of its container) like <div>...  Or you could add the display:block; to an anchor class.

    It really makes no difference either way - they'll both achieve the desired affect.  Using the <div> will mean you don't have to mess around with that particular anchor only for the menu.

    You also need some CSS to represent the caret background image...
        background: url( 'heronav-caret-20090608.png' );
        position: absolute;
        top: 0px;
        left: 0px; /*play with this some.*/

    The jQuery is below.

    Hopefully this helps at least by giving you a grasp of the concept behind what you should be doing.  I haven't tested this code (I should be working) ;) but it should give an idea as to how to achieve what you're looking for.  Feel free to get back in touch :)
    /* Event on list item... */
    $(document).ready( function(){
        $("#mainNav li").click( function(){
            $("a", this).siblings().removeClass("active");  //  Unset all other buttons
            $("a", this).addClass("active");
            $("div", this).siblings().removeClass("caret");
            $("div", this).addClass("caret");

    Open in new window

    LVL 8

    Author Comment

    Thanks for the reply again. It doesn't seem to quit work I've attached the files again with what you told me to do.

    LVL 8

    Author Closing Comment

    I figured it out. Thanks.
    LVL 6

    Expert Comment

    by:Tony O'Byrne
    Nice work :)
    Out of curiosity, what was the difference between my suggestion and what you did?

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    25 Experts available now in Live!

    Get 1:1 Help Now