Tips for creating a responsive navigation bar using your own custom CSS styling

While working on a website using bootstrap, I encountered an issue with responsiveness when adjusting the text size and gap of the navigation items. By increasing the size and adding a gap through fs-4 and style="gap: 10vh;", the default small size of the bootstrap navbar became non-responsive on smaller screens.

<body>
    <header class="header">

        <nav class="p-nav navbar navbar-expand-sm navbar-light border " >
            <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav m-auto mb-0 mb-lg-0 d-flex justify-content-between " style="gap: 10vh;" >
                        <li class="nav-item fs-4">
                            <a class="nav-link " aria-current="page" href="#" >Home</a>
                        </li>
                        ...
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <img src="assets/car(container).gif" alt="" class="img-fluid img-cc">


    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6c607d6a4f3d2136213d">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26262d2a2d2b2839097c6779677b">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
        crossorigin="anonymous"gt;</script>
</body>

View image before changing size and gap

Here is the image after adding gap and increasing size Image without gap

I attempted to use custom CSS along with other bootstrap utilities but the responsiveness issue persists.

htmlcssbootstrap-5

Answer №1

If you want to quickly fix the layout with minimal changes, consider applying flex-grow: 1 to your ul.navbar-nav.

The reason for this is that you have multiple nested flex containers and you need the list to expand to fill the available width without overflowing its container.

You attempted to use gap, but this caused the content of the ul to exceed the available width. Since the navbar is a flex container, you simply want the ul to occupy the entire width without overflow, while maintaining equal spacing around its child items (achieved by using justify-content-between or justify-content: space-between).

Initially, I added the inline style property instead of gap, which is equivalent to adding the Bootstrap class flex-grow-1 to the element.

Regarding the font size of your li elements, you applied the Bootstrap class fs-4 which translates to 

font-size: calc(1.275rem + .3vw)!important;
by default.

Since your requirements for font size are unclear and there are various methods to adjust it based on screen size such as using media queries or relative units, one approach could be setting a custom size in viewport width (vw).

In this case, I used font-size: 2.5vw !important; in a CSS rule targeting those items. This will make the font size smaller on smaller screens and larger on bigger screens without specific breakpoints like with media queries. Let me know if you need a different behavior.

ul.navbar-nav > li{
  font-size: 2.5vw !important; 
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce9f2ecf2ee">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5955485f7a0814031408">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f647a6478">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<body>
  <header class="header">
    <nav class="p-nav navbar navbar-expand-sm navbar-light border ">
      <div class="container-fluid">
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation">        
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        
          <!-- Added class flex-grow-1 -->
          <ul
            class="flex-grow-1 navbar-nav m-auto mb-0 mb-lg-0 d-flex justify-content-between ">    
            <!-- Removed class fs-4 and assigned style to ul > li items through css rule -->
            <li class="nav-item">
              <a class="nav-link " aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="#">Service</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Service Area</a>
            </li>
            <li class="nav-item fs-4">
              <a class="nav-link" href="#">Fleet</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Reservation</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Faq</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact Us</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <img src="assets/car(container).gif" alt="" class="img-fluid img-cc">
</body>

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

Inertia model - embedding a view within a model for various operations such as create, edit, and more

Currently, I am working with Laravel 9 and inertia. The project's design involves the use of modals for creating and updating functionalities. However, it appears that inertia does not offer built-in support for modals. I have come across some projec ...

laravelbootstrap-5inertiajsbootstrap5-modal

Is there a "Read more" link to expand the content on the page?

I am struggling to figure out why my JavaScript code for toggling between showing more text and less text is not functioning correctly. My goal is for the user to click on the "Show More" button to reveal additional text, and then be able to click on "Show ...

javascripthtml

Eliminate any empty spaces between the HTML tags

Is there a way to remove spaces between characters inside HTML tags? For example <option value="0" title="Advertising / Promotional Charges">Advertising / Promotional Charges</option> I tried using this code .replace(/\>\s+&bs ...

jqueryhtml

Toggle nested menu within another submenu

Looking for help with toggling menu items? I currently have a menu setup with 3 icons where clicking on an icon opens the dropdown-mobile UL under it. The goal is to toggle different submenu items when 'Main menu item' or 'sub-menu item&apos ...

jqueryhtmlmenutoggleslidetoggle

optimal method for organizing design elements

I have a container with 9 square-shaped divs that I want to arrange in the following layout: It should resemble something like this: _________ ____ ____ | A | B | C | | |____|____| | | D | E | |_________|____|____| | F | G | ...

htmlcsslayoutflexbox

JavaScript has been used to modify a cell's URL in jqGrid

Currently, I am utilizing struts2-jqgrid along with JavaScript. After the jqgrid has finished loading, it retrieves <s:url var="updateurl" action="pagosActualizar"/>. Subsequently, in the HTML view source, jqgrid generates options_gridtable.cellurl = ...

javascriptjqueryhtmljqgridstruts2

When using AJAX POST requests, HTML links may become unresponsive

Scenario: Currently, I am developing a small-scale web application. The AJAX functionality is successfully sending data to create.php which then executes the necessary MySQL query. Upon completion of the AJAX request, a success message is appended to the d ...

javascriptphpjqueryhtmlajax

The reverse of the alt text is displayed

Utilizing a right-to-left language with dir='rtl' on the body element. This causes the entire page to flow correctly from right to left. However, the alt text within images is showing up in reverse for some reason. Check out this jsFiddle link ...

htmlcssright-to-leftalt

I have successfully added an image to my CSS file, and it is appearing in Chrome's inspect feature. However, the image is not visible on the actual website

Here is the code snippet: .nav-link-apple { width: 1.6rem; background: 4.4rem; background: url(./Logo.jpg) center no-repeat; } Although the image I added can be seen in inspect on Chrome, it is not visible on the actual webpage. I have tried s ...

htmlcss

jQuery function to automatically close any other opened divs when a new div is opened

I have multiple elements that reveal a div when clicked. The issue is that if all elements are clicked, all divs open instead of just the one that was clicked. This is my jQuery code: <script> $(document).ready(function() { $('.servicemark ...

javascriptjqueryhtmlcss

issue with manipulating hidden field on the client side

After some troubleshooting, I discovered an issue with a hidden field in my form. Despite changing the value using JavaScript right before submitting the form, on the server side it appeared to be null or empty. The Request.Form["hidAction"] showed as em ...

asp.netjavascripthtmldom

Ensuring a @keyframe animation remains constant for the entire duration of the user's visit to the webpage using CSS

How can I create a continuous @keyframe animation that stays active for the duration of the user's visit to my webpage? I've implemented several color animations on my website, each with a specific duration. Is there a way to make these color ch ...

htmlcss

In Safari, the CSS filter value may not be applied immediately, whereas in Chrome it is

While dragging the input range, the brightness value (also a CSS property) updates but the image is not instantly affected in Safari. (It works well in Chrome) How can the changes be applied to the image while dragging? var app = Vue.createApp({ data() ...

cssvue.jsinputfilterrange

Retrieve several values with a limit of 1 in SQL

Consider the following table structure: ID | ident | product 1 | cucu1 | 99867 | 2 | kkju7 | 88987 | 3 | sjdu4 | 66754 | 4 | kjhu6 | 76654 | 5 | cucu1 | 98876 | Running the query: SELECT ident,COUNT(*) FROM sales WHERE status=? AND team=? AND DATE(da ...

phphtmlsql

How can one retrieve the 'alt' attribute text from an image tag on a webpage using the JSOUP library in an Android application?

Extracting the 'alt' text from an 'img' tag in Android after clicking a button is causing issues. The attempted code is not working as expected. Here is the snippet of the code that was used: Document doc = Jsoup.connect(url).get(); ...

javaandroidhtmlweb-scrapingjsoup

Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code. Currently, I'm working on replicating a website for practice. I have created a nav bar and a drop ...

htmlcssmenudropdownstyling

Execute javascript function upon user scrolling to a designated section in the webpage

Is there a method to trigger a unique function every time a user scrolls to a different div or section of the page? ...

javascriptjquerycsshtml

Why does the HTML and CSS slider fail to load upon page refresh, yet works perfectly when the next or previous button is clicked?

There seems to be an issue with the slider images not loading on page refresh. Oddly enough, they appear only after clicking the next button. However, upon refreshing the page again, the images disappear. <div class="slide-banner"> < ...

javascripthtmlcss

The cube mesh is failing to render inside the designated div

I created a Torus and Cube Mesh in my scene, but I want the cube to be positioned at the bottom right corner of the screen. Here's what I tried: <div style="position: absolute; bottom: 0px; right:0px; width: 100px; text-align: center; "> & ...

javascriptcsshtmlthree.js

Is it possible to access forms and input fields in an AngularJS script without having to pass them from the HTML code?

Seeking a solution for input field validation, I have written code where input field states are passed from HTML to a script through a function. However, my goal is to directly retrieve the values in the script without passing them from the HTML when calli ...

javascriptangularjshtml