Tabbar Active Line Overlapping the Text

Hello! I am developing a simple movie app while learning the F7. I have a certain layout that I’d like to achieve using tabbar or toolbar.

The layout is the tabbar as “part of the page” not a bottom toolbar or subnavbar.
I removed the “toolbar-top” /"-bottom" as per vlad’s suggestion. It worked but
there is one problem.

Here is the screenshot:

The problem is: the blue line that tells which tab is active, is overlapping the text.

Here are my codes:






Show






    <div class="toolbar tabbar">
      <div class="toolbar-inner">
        <!-- Links have "tab-link" class instead of just "link" to switch tabs -->
        <a href="#tab-1" class="tab-link tab-link-active">Episodes</a>
        <a href="#tab-2" class="tab-link">Trailer</a>
        <a href="#tab-3" class="tab-link">About</a>
      </div>
    </div>
    <!-- Tabs -->
    <div class="tabs">
      <!-- First tab, active -->
      <div class=" tab tab-active" id="tab-1">
        <div class="block">
          <p><b>Tab 1 content</b></p>
           
        </div>
      </div>
      <!-- Second tab -->
      <div class=" tab" id="tab-2">
        <div class="block">
          <p><b>Tab 2 content</b></p>
          ...
        </div>
      </div>
      <!-- Third tab -->
      <div class=" tab" id="tab-3">
        <div class="block">
          <p><b>Tab 3 content</b></p>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

Am I missing something? or It is an issue that f7 hasn’t encountered yet?
Hope anyone can solve this. Thank you!

-Sean

Where did i suggest it? :smiley: This issue exactly because you don’t have one of these classes. Add toolbar-top or bottom class and tweak toolbar position styles to match your needs

On twitter haha from @seansumido. :smiley:
OK, it’s more on tweaking the styles of the toolbar-top or tool-bottom.
Ill work on it. Thank you