Custom navbar images

This example demonstrates how to include custom images in a navbar

by jch02140

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<div data-role="page">
    <div data-role="content">
        Test page 3
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li>
                    <a href="#" data-transition="slide" data-direction="reverse">
                        <img src="https://c9.io/jch02140/petplay_ios/workspace/images/tb_sc_mission.png" />
                    </a>
                </li>
                <li>
                    <a href="#" data-transition="slide" data-direction="reverse">
                        <img src="https://c9.io/jch02140/petplay_ios/workspace/images/tb_sc_mission.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://c9.io/jch02140/petplay_ios/workspace/images/tb_sc_mission.png" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://c9.io/jch02140/petplay_ios/workspace/images/tb_sc_mission.png" />
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.ui-btn-inner{
    padding: 0em !important;
    border: none !important;
}

.ui-btn-up-a{
    background: none !important;
}

.ui-btn-hover-a{
    background: none !important;
}

.ui-bar-a{
    background: none !important;
    border: none !important;
}
img{
    width: 100%;
}

.ui-header .ui-navbar li .ui-btn, .ui-footer .ui-navbar li .ui-btn{
    border-left-width: 0;
}


/* The 2 classes below fix our issues of the footer */
.ui-header .ui-navbar .ui-grid-c li.ui-block-d .ui-btn, .ui-footer .ui-navbar .ui-grid-c li.ui-block-d .ui-btn, .ui-header .ui-navbar .ui-grid-d li.ui-block-e .ui-btn, .ui-footer .ui-navbar .ui-grid-d li.ui-block-e .ui-btn{
    margin-right: -1px !important;
}

.ui-navbar li .ui-btn{
    margin: 0 -1px -3px 0 !important;
}