3

I am using a code snippet from https://bootsnipp.com/snipps/vacation-rentals

This snippet provides the user with a chice of 3 options with tabbed menus.

Please check the website and you will see how this tabbed menu works.

enter image description here

This is the code of this snippet

<div class="row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <div class="span12">
                <div class="tabbable tabs-left">

                    <ul class="nav nav-tabs" style="padding-top:15px;margin-left:-20px;">
                        <li class="active"><a href="#A" data-toggle="tab">Apartman A2(1+1)</a></li>
                        <li><a href="#B" data-toggle="tab">Apartman A4(2+2)</a></li>
                        <li><a href="#C" data-toggle="tab">Apartman A6(4+2)</a></li>

                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="A">
                            <img src="http://placehold.it/80x80">
                        </div>
                        <div class="tab-pane" id="B">
                            <img src="http://placehold.it/80x80">
                        </div>
                        <div class="tab-pane" id="C">
                            <img src="http://placehold.it/80x80">
                        </div>
                    </div>
                </div> <!-- /tabbable -->

            </div>
        </div>
    </div>
</div>
<hr>

However, I am trying to add this to my website and it gets effected from the upper li,ul behaviours and it doesn't work.

It becomes like this.

enter image description here

This is my website http://www.carantina.com

Please check 'PRODUCTS' page and you will see what I mean.

If I can override preceding ul,li tag's style behavior and set them to default bootstrap styles, it may work. But I couldn't do that.

SNaRe
  • 1,997
  • 6
  • 32
  • 68

1 Answers1

0

It is because you have tabbable element inside navbar, and some of css styles referring to tabs are corrupted by navbar styles.

Try adding this style:

.navbar .tabs-left>.nav-tabs>li {
    float: none;
}

And search for other styles that gets corrupted. Although this could not be all that is not working well.

Jan.J
  • 3,050
  • 1
  • 23
  • 33
  • Now it is better but still there are some problems as you said. I have to modify couple of code I suppose. I am perplexed a little bit. – SNaRe Jul 20 '13 at 11:03
  • My advice: open bootstrap.css file(not minified), search for lines where `.tabbable` element is defined, copy all of it(or only some parts if you know what you exactly need) and prepend each rule with `.navbar` – Jan.J Jul 20 '13 at 11:08
  • I don't want to edit the core a lot. But if nothing works I will try to do that. – SNaRe Jul 20 '13 at 11:28
  • So you can just add some custom class to your tabs and use it instead of `.navbar` class in overrided rules. That way it will only apply to elements with that custom class. – Jan.J Jul 20 '13 at 11:31
  • I think I will do as you said. I have a small question. Normally I have to click tab in order to change the tab. How can I modify my code and when I hover on the tab it can behave like it is clicked? – SNaRe Jul 20 '13 at 11:44
  • This should be exactly what you want: http://stackoverflow.com/questions/9815247/how-to-make-with-twitter-bootstrap-tabs-on-hover-instead-of-clicking – Jan.J Jul 20 '13 at 11:47