Navbar hairline not disappearing

Questions
1

For some reason, adding no-hairline in this particular navbar does not remove the hairline, even though the correct css gets referenced through the class.
It works normally with the subheader and the rest of the content in the page.

It does not happen in any other instance.

Code:

<div class="page page-with-subnavbar" style="background-color: black;">
            <div class="navbar no-hairline">
                <div class="navbar-inner">
                    <div class="left">
                        <a id="back" class="link back">
                            <i class="icon icon-back"></i>
                        </a>
                    </div>

                    <div>
                        <span id="navbarReportTitle"></span>
                    </div>

                    <div class="right">
                        <i id="navbarReportIcon" class="f7-icons button link popover-open" data-popover=".popover-links">more_vertical_fill</i>
                    </div>
                </div>

                <div class="subnavbar no-hairline">
                    <div class="subnavbar-inner">
                        <div class="left"></div>

                        <div class="swiper-container vesselsSwiper">
                            <div class="swiper-wrapper"></div>

                            <!-- If we need navigation buttons -->
                            <div class="swiper-button-prev vesselsSwiper-button-prev"></div>
                            <div class="swiper-button-next vesselsSwiper-button-next"></div>
                        </div>

                        <div class="right"></div>
                    </div>
                </div>
            </div>
2

Try to use inspector and you will see that in iOS theme there is one common navbar container. You need to add/remove no-hairline class on this navbar dynamically. For example inside of page:init event of this page

3

Hello Vladimir, thanks for your reply :slight_smile:

I tried your suggestion and used Dom7 to add the class in the init event.
While in the inspector it seems to work (just like the regular class), the hairline is still there.
The :after element is removed and the display: none !important css bit get added, yet the hairline remains.

I tried skipping the no-hairline class and just using css to hide the :after element, but again, while it seems to do its job, the hairline is still visible.

image
image.png1215×350 35.1 KB

^ According to the screenshot the hairline should be gone, right?
Wrong, the :after element is indeed removed from the dom, but the hairline is still visible.

I think I’m missing something major here.

4

I noticed a -1px padding top in the subnavbar, so I just changed that to 0px and the hairline is gone.

Works for me :v: