search

halfmoonui / halfmoon

Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components.
https://www.gethalfmoon.com
MIT License
3.01k stars 118 forks source link

How to add a progress bar and button to bottom nav bar? #104

Closed qwasko1212 closed 3 years ago

qwasko1212 commented 3 years ago

Hello. I am trying to add a progress bar to the bottom navigation bar using the following code: 

<nav class="navbar navbar-fixed-bottom">
    <div class="navbar-content">
        <button class="btn btn-sm" type="button" onclick="halfmoon.toggleDarkMode()">Switch colour</button>
    </div>
    <div class="navbar-content">
        <div class="progress">
            <div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="60"
                 aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</nav>

I have tried different combinations, but somehow progress bar is not rendered at all or overlapped with the button. Could you please help me to render progress bar in bottom nav. Thank you in advance.

qwasko1212 commented 3 years ago

Answer to myself. If you would read the doc carefully then you would find that the progress bar should be placed inside of the container <div class="content w-400 mw-full">

Code:

<div class="navbar-content">
    <button class="btn btn-sm" type="button" onclick="halfmoon.toggleDarkMode()">Switch colour</button>
</div>
<div class="navbar-content">
    <div class="content w-400 mw-full">
        <div class="progress">
            <div class="progress-bar bg-success progress-bar-animated highlight-dark" role="progressbar"
                 style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</div>