SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    0 Post(s)
    0 Thread(s)

    Lightbulb Arrow image in active bootstrap tab

    When in active tab, there is an arrow image under the tab but it is covered by red color tab image. May I know how to fix it? (This file show the arrow image w/o red tab image)

    This file shown the arrow image covered by red tab color:

    .nav-tabs2 .active { background-image:url(/mod/images/menu-arrow.png); background-repeat:no-repeat; background-position:bottom center; }

    <div class="box-head tabs">
    <ul class="nav2 nav-tabs2">
    <li class="active">
    <a href="#0" data-toggle="tab" class="firstelement">Active Tab</a></li>
    <li><a href="#1" data-toggle="tab">Inactive Tab</a></li>
    <li><a href="#2" data-toggle="tab">Inactive Tab #2</a></li>

    There is example how the arrow image look like when in actived tab:

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    460 Post(s)
    8 Thread(s)
    Yes, a background image on the LI is no use, because the content of the LI cover it over. If you gave the LIs a height of, say, 44px, and removed the bg color on the UL, you would see the arrow, but that's not very practical.

    Another option would be to use :before or :after on the LI (or <a>), put the arrow on it as a bg image, and position it absolutely at the bottom of the element. You'd just give the parent element position relative.

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts