Overflowing Bootstrap navbar problem

After adjusting the navbar height, the overflowing issue was resolved, but I specifically want it to be set at 5rem. Currently, the content of the navbar exceeds the 5rem height and mixes with the main body content, regardless of what modifications I make.

I attempted to eliminate the height and overflow control, but unfortunately, none of these strategies were effective.

Below is the code for the navbar:

<header>
  <nav class="sticky-top navbar navbar-expand-md bg-body-light border-bottom">
    <div class="container-fluid">
      <a class="navbar-brand" href="/listings"><b><i class="fa-brands fa-airbnb"></i> WanderLust</b></a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNavAltMarkup"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link" href="/listings">Explore</a>
          <a class="nav-link" href="/listings/new">Airbnb Your Home</a>
        </div>
        <div class="navbar-nav ms-auto">
          <form class="d-flex" role="search">
            <input
              class="form-control me-2"
              id="search-in"
              placeholder="Search destinations"
              aria-label="Search"
            />
            <button class="btn" id="search-btn" type="submit">
              <i class="fa-solid fa-magnifying-glass"></i> Search
            </button>
          </form>
        </div>
        <div class="navbar-nav ms-auto">
          <% if (!currUser){ %>
          <a class="nav-link" href="/signup"><b>Sign Up</b></a>
          <a class="nav-link" href="/login"><b>Log In</b></a>
          <% } %> <% if (currUser){ %>
          <a class="nav-link" href="/logout"><b>Log Out</b></a>
          <% } %>
        </div>
      </div>
    </div>
  </nav>
</header>

Here is the boilerplate code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WanderLust</title>
    <link rel="stylesheet" href="/css/style.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>

    <link rel="stylesheet" href="/css/rating.css" />
  </head>

  <body>
    <%- include('../includes/navbar.ejs') %> <%-include('../includes/flash.ejs')
    %>
    <div class="container"><%- body %></div>
    <%- include('../includes/footer.ejs') %>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
    <script src="/js/script.js"></script>
  </body>
</html>

When I add the CSS to the boilerplate code, the navbar starts to overflow. Here is the CSS code:

* {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  flex: 1;
}

/* Navbar */
.navbar {
  height: 5rem;
  background-color: white;
}

.fa-airbnb {
  color: #ff5a5f;
}

.nav-link {
  color: black !important;
}

/* Search Bar */
#search-btn {
  background-color: #ff5a5f;
  color: white;
  border-radius: 25px;
  padding: 0 1rem 0 1rem;
}
#search-btn i {
  display: inline;
  margin-right: 0.5rem;
}

#search-in {
  border-radius: 25px;
  padding: 0.5rem 3rem 0.5rem 3rem;
}

Answer №1

In order to maintain the responsiveness of the site, rather than directly altering it, consider adding top and bottom padding to the navigation bar. This simple adjustment will increase the height of the <nav>. To implement this, just include the pt-4 pb-4 classes within your <nav>. (For a visual reference, check out the documentation on Spacing) as shown below:

<nav class="sticky-top pt-4 pb-4 navbar navbar-expand-md bg-body-light border-bottom ">

* {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  flex: 1;
}


/* Navbar */

.navbar {
  background-color: white;
}

.fa-airbnb {
  color: #ff5a5f;
}

.nav-link {
  color: black !important;
}


/* Search Bar */

#search-btn {
  background-color: #ff5a5f;
  color: white;
  border-radius: 25px;
  padding: 0 1rem 0 1rem;
}

#search-btn i {
  display: inline;
  margin-right: 0.5rem;
}

#search-in {
  border-radius: 25px;
  padding: 0.5rem 3rem 0.5rem 3rem;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- link rel="stylesheet" href="/css/style.css" / -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3f24392439">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>

  <!-- link rel="stylesheet" href="/css/rating.css" / -->
</head>

<body>
  <header>
    <nav class="sticky-top pt-4 pb-4 navbar navbar-expand-md bg-body-light border-bottom ">
      <div class="container-fluid">
        <a class="navbar-brand" href="/listings"><b><i class="fa-brands fa-airbnb"></i> WanderLust</b></a
      >
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNavAltMarkup"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link" href="/listings">Explore</a>
        <a class="nav-link" href="/listings/new">Airbnb Your Home</a>
      </div>
      
      <div class="navbar-nav ms-auto">
        <form class="d-flex" role="search">
          <input class="form-control me-2" id="search-in" placeholder="Search destinations" aria-label="Search" />
          <button class="btn" id="search-btn" type="submit">
              <i class="fa-solid fa-magnifying-glass"></i>Search
            </button>
        </form>
      </div>

      <div class="navbar-nav ms-auto">
        <a class="nav-link" href="/signup"><b>Sign Up</b></a>
        <a class="nav-link" href="/login"><b>Log In</b></a>
        <a class="nav-link" href="/logout"><b>Log Out</b></a>
      </div>
      </div>
      </div>
    </nav>
  </header>

  <div class="container">
    <%- body %>
  </div>

  <%- include('../includes/footer.ejs') %>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398859885">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="/js/script.js"></script>
</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

Displaying complex JSON data in an HTML format using JavaScript

How can I convert the second array of entities into an HTML format from the JSON data using a for loop or similar method? To access the necessary data, I currently use console.log(data.response[0].entities.urls); $(document).ready(function () { $.getJSO ...

The art of placing images using CSS

I'm having trouble aligning the images into two rows of three, with the news section on the right side below the navigation bar. I've tried different methods but can't seem to get it right. Both the image and link should be clickable, but I& ...

Updating the customer's billing address in Stripe without modifying their payment card details

Can I update a customer's stored address on Stripe without updating their card information as well? Currently, when customers update their info, they are required to enter their card details even for minor changes like the city. Is there a way to only ...

Disable functionality not functioning properly on button attribute

I've created a demo on JSFiddle here: http://jsfiddle.net/qJdaA/2/. The goal of this code is to disable the button with the ID #monitor if no checkboxes are checked. var checked = $('#status_table tr [id^="monitor_"]:checked'); if (checked. ...

Including a personalized User-Agent string in my headers for fetch requests

Currently, I am utilizing the fetch API within my React project to retrieve data from a JSON endpoint. One requirement I have is to include a custom User-Agent string in my requests. Upon inspecting my requests, I noticed that the UA string displays as: ...

Creating a responsive textbox in Bootstrap - tips and tricks!

I am trying to use Bootstrap and I have a Textbox that contains some text. How can I make it responsive, meaning it adjusts to the screen size when I resize the window? When dealing with images, we use the "image-responsive" class, but what about a Textb ...

Steer clear of nesting subscribe functions when a forkjoin is present within

Below is my angular code: this.service.save(body).pipe( switchMap(resp => { return this.dialog.confirmation({ message: 'save object successfully!' }); }), filter(ok => ok), tap(() => { this.pro.status = re ...

Wcf Service does not define Angular JS methods

I am utilizing a WCF Service within an AngularJS application. The WCF Service is functional, and I am attempting to display a list of user records from a SQL database. However, upon running the application, I encountered the following errors: angular.js: ...

Inline styles are effective, but external stylesheets are not functioning properly (see JsFiddle for reference)

http://jsfiddle.net/xw0vvo9e/4/ Trying to specify a background color for the navBar. In the provided jsfiddle, the CSS includes: div .navBar { width: 100%; height: 45px; background-color: #FF0000; top: 0px; position: fixed; } However, the background ...

Exploring various data promises in AngularUI router

I am attempting to utilize the $q service to resolve multiple promises using the $q.all() function with AngularUI router. However, I am encountering issues where it is failing or not functioning as expected. This snippet is from my configuration file that ...

Style selector for dynamic drop-down menus

import React, { Component } from "react"; export default class FontChanger extends Component{ constructor(props){ super(props); this.state ={ selectedFont: "", currentFont: "", }; this.handleFon ...

What is the best way to make a JavaScript cookie remember the state of a DIV?

Seeking assistance with a test site here that is currently in development. I am attempting to make the notification at the top remain hidden once the close button is clicked. Below is my current script: <style type="text/css"> <!-- .hide { displ ...

Is there a way to automatically calculate the sum of two boxes and display the result in a separate

I am working with two boxes: one is called AuthorizedAmount and the other is called LessLaborToDate: <div class="col-md-6"> <div class="form-group"> <label>Authorized Amount</label> <div class="input-group"> & ...

What is the process for refreshing the component content in Angular 2?

There was a moment during execution when my URL had the following appearance: http://localhost:4200/personal/51c50594-a95c-4a18-ac7b-b0521d67af96 I desire to visit a page with a different GUID and different content. http://localhost:4200/personal/{other ...

Customized Values in AngularJS Slider

My slider currently has values ranging from 1 to 10, but I want to change them to 1 Lakh, 2 Lakhs, 3 Lakhs, 5 Lakhs, 10 Lakhs, and more than 10 Lakhs. How can I adjust the value set to display this text instead? I have incorporated rg-slider into my code ...

Injecting sinon js into an application within an iFrame: a step-by-step guide

I am looking to implement ajax requests testing in my application. The application is running within an iframe, and my goal is to have the iframe's wrapper page test the application using sinon (which will send the response). I attempted to include ...

Is there a way to prevent my Pixlee Instagram feed from disappearing when I reload the page in NextJS?

Here is the code snippet I'm working with: import { useEffect } from "react"; const InstagramFeed = () => { useEffect(() => { window.PixleeAsyncInit = function () { Pixlee.init({ apiKey: "MYAPIKEYISHERE" }); ...

Exploring the world of BDD with Node.js and Angular in an actual web

Currently, I am in the midst of developing an application using nodeJs + yo angular-fullstck, starting with BDD and TDD practices. After searching through multiple resources, I have decided to utilize cucumber-js and Jasmin with the karma runner for testi ...

Mobile devices not responding to media queries properly

My website has different sets of CSS styles for various screen sizes: (1) @media only screen and (max-width: 566px) { (2) @media only screen and (min-width: 567px) and (max-width: 767px) { (3) @media only screen and (min-width: 768px) and (max-width: 999 ...

Tips for retrieving nested objects in a get request

A dilemma I'm facing involves a form that effectively sends and saves JSON data to MongoDB using mongoose. However, the issue arises when attempting to access this data as the nested objects display on the get route html page as: { synth: { patch_na ...