Bootstrap 4 - styling a collapsed navbar

Question

I have the following HTML:

<nav class="navbar navbar-expand-lg px-5 py-3 fixed-top navbar-dark">

        <div>
            <p id="navbar-brand-text">Some text</p>
            <a class="navbar-brand smooth-scroll" href="#home">Brand text</a>
        </div>             

        <button class="navbar-toggler btn-navbar-toggler-style" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon" id="navbar-toggler-icon-style"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link smooth-scroll" href="#home">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 4</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 5</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#home">Item 6</a>
                </li>
            </ul> 
        </div>
    </nav>

And its related styling:

.navbar {
    transition: all .5s ease-in-out;
}    

#navbar-brand-text {
    color: white;
    padding: 0;
    margin: 0 0 5px 0;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.navbar .navbar-brand {
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.navbar-nav .nav-item {
    padding-left: 8px;
    padding-right: 8px;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
}

.navbar-dark .nav-item.active .nav-link,
.navbar-dark .nav-item:focus .nav-link,
.navbar-dark .nav-item:hover .nav-link {
    color: #4CAF50;
}

.btn-navbar-toggler-style:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* PADDING */
.navbar-collapse.show {
    padding-top: 30px;
}

I need to add some padding ONLY when the navbar collapses (the last CSS rule showed above in the code sample). This is what I obtain (looks like padding is added "too late"): gif

What's wrong? How can I achieve the desired result? Thank you all for helping.

Answer 1

Apply the custom padding to .navbar-collapse.collapsing too...

.navbar-collapse.collapsing,
.navbar-collapse.show {
    padding-top: 30px;
}

Demo: https://www.codeply.com/go/n76IchG8ak

Or, remove the custom padding and use the responsive padding classes such as...

<div class="collapse navbar-collapse pt-lg-0 pt-4" id="navbarSupportedContent">

Answer 2

You can add the padding to the collapse class instead of show.

.navbar-collapse {
    padding-top: 30px;
}

The show class only gets added when all items are shown, hence the delay.