Bootstrap: After collapsing the navbar, two `nav-items` should be visible

Looking to build a responsive website as a beginner and need help with creating a Dropbox navbar for an assignment that involves HTML, CSS, Bootstrap, and Javascript. While trying to make the site responsive, I encountered three issues:

  1. Create a two-column dropdown menu and increase its width.

  2. Make the dropdown menu resemble the image provided below.

  3. Ensure that when collapsing the navbar, the Login and Signup options remain visible.

The Image: (https://i.sstatic.net/rXRYN.png)

Logo in the code: (https://i.sstatic.net/ERv7J.png)

Would appreciate any assistance with this task. Below is the code snippet for the navbar:

 (navbar code snippet)
htmlcssbootstrap-4navbarbootstrap-5

Answer №1

Feel free to use this code snippet to enhance your project.

To get the full code, visit: https://codepen.io/iamponsiva/pen/QWJMgQE

.w250 {
  width: 250px;
}

.navbar-brand {
  font-size: 1.4em;
}

.navbar-dark .navbar-nav a.nav-link {
  color: #ffffff;
  font-size: 1.1em;
}

.dropdown-menu {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border: none;
  border-radius: 0;
  padding: 0.7em;
}

@media only screen and (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: flex;
  }
  .dropdown-menu.show {
    display: flex;
  }
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
}

.dropdown-menu li .dropdown-item {
  color: gray;
  font-size: 1em;
  padding: 0.5em 1em;
}

.dropdown-menu li .dropdown-item:hover {
  background-color: #f1f1f1;
}
...

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdac1dfc1dd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: #ffffff;">
    <div class="container-fluid">
      <a class="navbar-brand fw-bold" href="#">
        <img src="https://i.sstatic.net/ERv7J.png" class="w250" alt="img">
      </a>
      <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">

        ...
      </div>
    </div>
  </nav>


  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d839d81">[email protected]</a>/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

</body>

</html>

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

Is it possible to create a resizable menu without distorting its appearance?

After setting up a menu on my website, I noticed that when resizing the window, it spills over into other divs on the same line. Despite trying multiple solutions, I have been unsuccessful in resolving this issue. The navigation for the menu is contained w ...

htmlcssresponsive-design

Experiencing difficulty in displaying the correct checkbox validation status with Bootstrap 5 for a Django model form containing a many-to-many field and CheckboxSelectMultiple widget

I'm encountering an issue with a checkboxselectmultiple on an m2m model field in a ModelForm that is required - meaning at least one choice must be selected. I have applied the boostrap5 was-validated class to my form: <form method="POST" ...

djangovalidationbootstrap-5

JavaScript not redirecting to HTML page as expected

I have developed a basic login page that makes an Ajax request to the backend. However, I am experiencing difficulties with redirecting the page upon successful login. The redirect function only seems to work 1 in 15 times, and I'm unsure of the reaso ...

javascripthtmlajax

Tips for arranging two columns and two rows on mobile using Bootstrap 5

I'm currently using bootstrap 5, and I need to display 2 columns and 2 rows on my mobile device, but it's only showing 1 row. I have two PSDs for this layout in desktop mode: https://i.sstatic.net/HWG6e.png And for mobile mode: https://i.ssta ...

htmlcssbootstrap-5

The hamburger menu image is not appearing when using the CSS background-image property

The burger menu image I have as a background image is not displaying in my navigation bar or on the page. I set it to appear when the page is responsive (max-width: 480px), but it still doesn't show. I even tried copying the code to my main CSS above ...

htmlcss

"Using Vue 3 to teleport content to a specific element and swap out existing

I've successfully implemented the use of Vue 3 teleport to display elements within a div. Although teleport adds items to the specified element, it doesn't replace existing elements in the div. Is there a way to configure teleport to replace th ...

javascripthtmlvue.js

Develop a dynamic progress bar using jQuery

I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet: *'width' : width - seems to be causing issues for me / ...

htmljquerycss

Step-by-step guide for installing Bootstrap on a Node.js project using npm

https://i.sstatic.net/mS0T0.pngAs part of my journey to learn node.js, I embarked on a simple project. My attempt to install Bootstrap using npm hit a snag as the bootstrap.css was working fine but the page output was not satisfactory. Despite downloading ...

jquerynode.jsexpressnpmbootstrap-4

Remove text on the canvas without affecting the image

Is there a way to remove text from my canvas element without losing the background image of the canvas? I'm considering saving the Image source and reapplying it to the Canvas Element after using clearRect, but I'm unsure how to execute this sol ...

javascripthtmlcanvas

Validation of forms - Must include one particular word from a given set

I am in the process of utilizing Javascript to validate an input field with the specific formatting requirements outlined below: "WORD1,WORD2" The input must contain a comma separating two words, without any spaces. The first word (WORD1) can be any word ...

javascripthtmlcssformsvalidation

"Enhance your listening experience with an audio player featuring album covers as captivating

Is there a way to create an audio player with the album cover image serving as the background, while ensuring all control buttons are displayed on top of that same image? I attempted using the following code snippet: <audio controls = 'controls&ap ...

javascriptcsshtmlbootstrap-4

Avoid HTML code injection in an ExtJS4 grid by properly escaping the href attribute

I am facing an issue with escaping HTML in my Extjs grid. I have used the following configuration : return Ext.String.htmlEncode(value); In the renderer of my column, this method works perfectly for simple HTML tags like h1, b, i, etc. However, if I in ...

javascriptjqueryhtmlextjs

How can I use jQuery to activate and deactivate a class in HTML?

My jQuery function for handling tabs is as follows: jQuery(document).ready(function($) { tab = $('.tabs h3 a'); tab.on('click', function(event) { event.preventDefault(); tab.removeClass('active'); ...

jqueryhtml

Can you help me figure out how to make a header that sticks to the top of the page as you scroll horizontally, and a sidebar that stays in place as you scroll vertically with

I am currently working on developing a layout that includes a sticky header and sidebar for my content list. My goal is to have the sidebar scroll down as I move through the page content, while also ensuring that the header scrolls horizontally along with ...

htmlcss

Will the identifier "id" be considered unique if the element with the matching id has its display property set to "none"?

Imagine you have a DIV element in your document with the id "row". Now, if you add another DIV with the same id and change the display property of the first DIV to "none", does the id of the second DIV become unique? ...

javascripthtmlcssdom

Show the Select component in a grid format with a list view, displaying three items per row

Within my react Dropdown component, there is currently a list view displayed when an item is selected. However, I am looking to modify it so that the items are arranged in a grid format with 3 items per row. Sample Code: import { Dropdown } from 'pri ...

cssreactjs

Styling Your PHP Output with Echo

Is there a way to create a compact text box with a scroll bar that can display recurring data generated by PHP activities on the server side? How can I format it in this way? ...

phphtmlcss

Methods for Obtaining the Base URL Together with href Links

Currently, I find myself at this location: localhost/magento/dresses/adidas-t-shirt.html In my file, I have written the following: <a href="my/hello/">Click Here</a> When I click on Click Here, I am directed to: localhost/magento/dresses/ ...

phphtmlmagento

Exploring the Images directory

I hate to admit it, but I'm really struggling with this question. It's frustrating and I've searched everywhere for an answer. Currently, I'm using WAMP on Localhost with PHPstorm. The issue I'm facing is accessing the images di ...

phphtmlimagepathdirectory

What is the best way to adjust the position of the left-aligned button on an HTML table so that it

https://i.sstatic.net/DIIsv.png I'm working with HTML code that has tables wrapped around with Divs using Bootstrap. The issue I'm facing is that the "Sold By" Table is not aligned with the rest of the content and I want to move it more towards ...

htmlcssbootstrap-4