Creating a sleek look for a compacted navigation bar using Bootstrap 4

Here is the HTML code snippet I am working with:

<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>


Below is the corresponding style for the HTML elements:

.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;
}


Currently, when the navbar collapses, I noticed that the padding seems to be added too late as shown in this gif.

I am seeking advice on how to achieve the desired result and correctly add padding only when the navbar collapses. Your assistance will be highly appreciated. Thank you.

csshtmlbootstrap-4navbar

Answer №1

Consider applying the specified padding to .navbar-collapse.collapsing.

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

Check out the demo here:

Alternatively, you can opt to remove the custom padding and utilize responsive padding classes like...

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

Answer №2

Instead of applying padding to the show class, you can add it to the collapse class.

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

The show class is only applied when all items are displayed, which causes a delay in rendering.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to upload a file into the system

I'm in the process of creating a website that allows for file uploading. Check out my code below: index.php: <?php include('/inc/header.php'); ?> <?php if($_SESSION['username'] != null) { echo " <form class=&bs ...

phphtml

Removing empty table rows using JavaScript when the page loads

Within my HTML table, I have noticed some empty cells and rows that need to be removed. To give an example of the code: <table id="7"> <tr> <td>Name</td> <td>Type</td> <td>Parent</td> <td>Time</td&g ...

javascripthtmlcss

Adjust the position of the element by lifting it slightly

I am looking to adjust the positioning of the number "01 / 04" to match the layout shown in this image: https://i.sstatic.net/3MNA5.png Here is what I have accomplished so far: https://i.sstatic.net/6ayOx.jpg This is how the code structure looks like i ...

cssvue.jssass

Switching from ejs format to html

I've been working on a tutorial that uses ejs, but I'm not too familiar with it. I'd like to know how to convert the server.js from using ejs to html. Here's the code snippet: app.set('view-engine', 'ejs') app.use( ...

javascripthtmlnode.jsexpresspassport.js

Enhancing the appearance of the MUI DatePicker

I'm currently using a DatePicker component from Mui Lab and I'm attempting to customize the appearance of the Calendar component by incorporating some border or background color. Although I've tried utilizing the PaperProps prop for DatePick ...

cssreactjsmaterial-ui

Understanding the res.render method in JavaScript can be a bit tricky at first

In my spare time, I have been immersing myself in coding lessons and have encountered some puzzling aspects of the code: Firstly, there is a confusion surrounding the action attribute in HTML Secondly, this particular piece of code is causing me some b ...

javascripthtmlexpressresponsebody-parser

Unable to retrieve $wpdb, returning as null

In my development process, I am working on a basic plugin using the Wordpress Plugin Boilerplate. I have implemented AJAX to create an action triggered by a button press to remove an item from a custom database table I have set up. The AJAX function, butto ...

javascriptphphtmlajaxwordpress

Making the toggle button functional on the navbar

Trying to customize my navbar for tablet and mobile devices is proving to be a challenge. I am looking for a way to make the dropdown button take up the entire page when clicked on. It seems like JavaScript might be the solution, but I'm not quite sur ...

javascriptcssbootstrap-4navbar

Discovering the compiled CSS file in React when using Sass: A step-by-step guide

In my React project, I have incorporated SASS. Now I am looking to find the final compiled CSS file from that SASS code. Whenever I navigate to: While there is the SCSS file visible, where can I locate the CSS version? I am referring to the compiled outp ...

cssreactjssass

Having difficulty with utilizing the validate() function in jQuery

My HTML code looks like this: <form class="form-filter" id="form-filter-excel" role="form"> <div class="row"> <div class="col-md-4 col-sm-5"> <label>Date range</label> ...

javascriptjqueryhtmlcss

Is there a way to enable automatic scrolling in a Django chat application?

Hello! I am looking to implement an automatic scroll-down feature on my webpage. Every time I refresh the page, I find myself at the top of the conversation, specifically at the "start-conversation" section. Below is the code snippet that I am currently ...

javascripthtmljquerydjango

What types of video formats will be accepted?

I tried searching on Google but couldn't find the answer. I am curious to know, when using an input file like this: <input type="file" accept="video/*"> Which video formats are allowed for upload? I attempted to upload a .flv file and the ...

htmlvideo

Ways to eliminate the default margin surrounding an image within a div

Struggling with CSS while building websites is a common issue for me. In my current project, I have encountered a challenge where I placed two images inside a div container. Oddly enough, when I add text to the div, it adjusts its height accordingly. How ...

htmlcssimage

Using a repeating background in CSS with overflow displayed at the top rather than the bottom

Does anyone know how to make the repeating background 'start' fixed at the bottom of the div and overflow on the top? I want it to be the opposite of the default behavior. Let me illustrate what I'm trying to achieve with a small example. I ...

htmlcss

Retrieve the ID of the checkbox and join it with a comma before adding it to the textbox

I have a piece of code that I am working with and need assistance. Specifically, I am trying to retrieve the ID of the selected checkbox within my prescriptionid div tag only. Although I have attempted to write jQuery code for this purpose, I have not be ...

javascriptjqueryhtml

Background images are not appearing in Rails production environment

There seems to be an issue with my images not showing up in the production environment (link here). Here is a snippet of my code: _header.html.erb <%if action_name == 'index' %> <div class="main_header_bg" id="main_head ...

cssruby-on-rails

Ways to display the values of angular variables within ng-bind-html

Converting HTML content from a database saved as varchar to front end JavaScript code can be tricky. The content is stored in a variable called vm.htmlContent and must be displayed as HTML on a web page. To achieve this, the ng-bind-html angular directive ...

javascripthtmlangularjsng-bind-htmlng-bind

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method

I am currently facing an issue with looping through an array of objects using $.each in jQuery and trying to append the values to an <li>. Here is the relevant jQuery code: $(".sidebar").empty().append("<div>" + "<h5>Student Info</ ...

javascriptjqueryhtmlarraysjson

CSS3 Marquee Effect - puzzled

After trying numerous solutions for the marquee effect, I find myself at a dead end. Even webkit examples have failed me, as the demos don't seem to work either. My browser of choice is Chrome, but my website needs to function properly in both Chrome ...

htmlcssvalidationcss-animationsmarquee

A specific div remains in place as the user scrolls

Imagine a div that is positioned 60px from the top of the screen. What if, as you scroll down, it stops when it reaches 10px from the top and remains there for the rest of your scrolling session? And then, when you scroll back up, it goes back to its ori ...

javascripthtmlcss