"Is there a way to adjust the alignment of a Bootstrap 4 dropdown menu to be left-aligned and expand to

Here's my attempt at aligning the dropdown to the left and giving it full width. I've tried various methods like adding dropdown-menu-left or pull-left, but it doesn't seem to be working for me. I'm aiming for a dropdown similar to the one on poorishaadi.com, but I haven't been able to figure it out. It would be greatly appreciated if someone could assist. I'm using simple Bootstrap to implement this code.

.navbar-nav>li {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 15px;
}

.dropdown>.dropdown-menu {
  min-width: 570px;
  margin-top: 8px;
}

.multi-column-dropdown {
  list-style: none;
  margin-left: 20px;
  padding: 0px;
}

.multi-column-dropdown li a {
  display: block;
  clear: both;
  line-height: 1.428571429;
  color: rgb(0, 0, 0);
  white-space: normal;
  margin-top: 10px;
}

.multi-column-dropdown li a:hover {
  text-decoration: none;
  color: #f80606;
}

@media (max-width: 767px) {
  .dropdown-menu.multi-column {
    min-width: 240px !important;
    overflow-x: hidden;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white 
    sticky-top ">
  <div class="container">
    <a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
      <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse text-center" id="collapsenavbar">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link font-weight-bold" href="index.php">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
          <div class="dropdown-menu multi-column" aria-labelledby="dropdown01">
            <div class="row">
              <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                  <li><a href="caterers.php">Caterers</a></li>
                  <hr />
                  <li><a href="decorer.php">Decorator</a></li>
                  <hr />
                  <li><a href="dholwale.php">Dhol Wale</a></li>
                  <hr />
                </ul>
              </div>
              <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                  <li><a href="flowrdecor.php">Flower Decorator</a></li>
                  <hr />
                  <li><a href="makeupart.php">Makeup Artist</a></li>
                  <hr />
                  <li><a href="mehandi.php">Mehandi Artist</a></li>
                  <hr />
                </ul>
              </div>
              <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                  <li><a href="photo.php">Photography</a></li>
                  <hr />
                  <li><a href="sound.php">Sound & DJ</a></li>
                  <hr />
                  <li><a href="Venue_1.php">Venue</a></li>
                  <hr />
                </ul>
              </div>
              <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                  <li><a href="cards.php">Wedding Cards</a></li>
                  <hr />
                  <li><a href="Wedplan.php">Wedding Planner</a></li>
                  <hr />
                </ul>
              </div>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </div>
</nav>

htmlcssbootstrap-4

Answer №1

To ensure your dropdown menu is full width, make sure to include the position-static class on your <li> items and add the w-100 class to your dropdown menu.

Check out your updated code below:

<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white sticky-top">
    <div class="container">
      <a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse text-center" id="collapsenavbar">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active position-static">
            <a class="nav-link font-weight-bold" href="index.php">Home</a>
          </li>
          <li class="nav-item dropdown position-static">
            <a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
       <div class="dropdown-menu multi-column w-100" aria-labelledby="dropdown01">
          <div class="row">
             <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                   <li><a href="caterers.php">Caterers</a></li>
                   <hr />
                   <li><a href="decorer.php">Decorator</a></li>
                   <hr />
                   <li><a href="dholwale.php">Dhol Wale</a></li>
                   <hr />
                </ul>
             </div>
             <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                   <li><a href="flowrdecor.php">Flower Decorator</a></li>
                   <hr />
                   <li><a href="makeupart.php">Makeup Artist</a></li>
                   <hr />
                   <li><a href="mehandi.php">Mehandi Artist</a></li>
                   <hr />
                </ul>
             </div>
             <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                   <li><a href="photo.php">Photography</a></li>
                   <hr />
                   <li><a href="sound.php">Sound & DJ</a></li>
                   <hr />
                   <li><a href="Venue_1.php">Venue</a></li>
                   <hr />
                </ul>
             </div>
             <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                   <li><a href="cards.php">Wedding Cards</a></li>
                   <hr />
                   <li><a href="Wedplan.php">Wedding Planner</a></li>
                   <hr />
                </ul>
             </div>
          </div>
       </div>
    </li>

 </ul>

For a live demonstration of this code, you can visit this fiddle link.

Answer №2

Kindly review this proposed solution.

Your dropdown-menu is currently positioned relative to the nav-item, but it should be related to the encompassing full-width container. 

.navbar-nav>li {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 15px;
}

.dropdown>.dropdown-menu {
  min-width: 570px;
  margin-top: 8px;
}

.multi-column-dropdown {
  list-style: none;
  margin-left: 20px;
  padding: 0px;
}

.multi-column-dropdown li a {
  display: block;
  clear: both;
  line-height: 1.428571429;
  color: rgb(0, 0, 0);
  white-space: normal;
  margin-top: 10px;
}

.multi-column-dropdown li a:hover {
  text-decoration: none;
  color: #f80606;
}

@media (max-width: 767px) {
  .dropdown-menu.multi-column {
    min-width: 240px !important;
    overflow-x: hidden;
  }
}


/* Additional Styles */

.container {
  position: relative;
}

.nav-item {
  position: static !important;
}

.dropdown-menu {
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white 
sticky-top ">
  <div class="container">
    <a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
  <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse text-center" id="collapsenavbar">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link font-weight-bold" href="index.php">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
          <div class="dropdown-menu multi-column" aria-labelledby="dropdown01">
            <div class="row">
              <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                  <li><a href="caterers.php">Caterers</a></li>
                  <hr />
                  <li><a href="decorer.php">Decorator</a></li>
                  <hr />
                  <li><a href="dholwale.php">Dhol Wale</a></li>
                  <hr />
                </ul>
              </div>
              <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                  <li><a href="flowrdecor.php">Flower Decorator</a></li>
                  <hr />
                  <li><a href="makeupart.php">Makeup Artist</a></li>
                  <hr />
                  <li><a href="mehandi.php">Mehandi Artist</a></li>
                  <hr />
                </ul>
              </div>
              <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                  <li><a href="photo.php">Photography</a></li>
                  <hr />
                  <li><a href="sound.php">Sound & DJ</a></li>
                  <hr />
                  <li><a href="Venue_1.php">Venue</a></li>
                  <hr />
                </ul>
              </div>
              <div class="col-md-3 col-sm-3 col-lg-3">
                <ul class="multi-column-dropdown">
                  <li><a href="cards.php">Wedding Cards</a></li>
                  <hr />
                  <li><a href="Wedplan.php">Wedding Planner</a></li>
                  <hr />
                </ul>
              </div>
            </div>
          </div>
        </li>

      </ul>
    </div>

Answer №3

Simply take out the text-center class from the <div id="collapsenavbar">. The revised code is shown below:

.navbar-nav > li{
  padding-left:10px;
  padding-right:10px;
  font-size: 15px;
}
.dropdown > .dropdown-menu {
  min-width: 570px;
  margin-top: 8px;
}
.multi-column-dropdown {
  list-style: none;
  margin-left: 20px;
  padding: 0px;
}
.multi-column-dropdown li a {
  display: block;
  clear: both;
  line-height: 1.428571429;
  color: rgb(0, 0, 0);
  white-space: normal;
  margin-top: 10px;
}
.multi-column-dropdown li a:hover {
  text-decoration: none;
  color: #f80606;
}

@media (max-width: 767px) {
  .dropdown-menu.multi-column {
    min-width: 240px !important;
    overflow-x: hidden;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white 
sticky-top ">
<div class="container">
  <a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsenavbar">
     <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
           <a class="nav-link font-weight-bold" href="index.php">Home</a>
        </li>
        <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
           <div class="dropdown-menu multi-column" aria-labelledby="dropdown01">
              <div class="row">
                 <div class="col-md-3 col-sm-3 col-lg-3">
                    <ul class="multi-column-dropdown">
                       <li><a href="caterers.php">Caterers</a></li>
                       <hr />
                       <li><a href="decorer.php">Decorator</a></li>
                       <hr />
                       <li><a href="dholwale.php">Dhol Wale</a></li>
                       <hr />
                    </ul>
                 </div>
                 <div class="col-md-3 col-sm-3 col-lg-3">
                    <ul class="multi-column-dropdown">
                       <li><a href="flowrdecor.php">Flower Decorator</a></li>
                       <hr />
                       <li><a href="makeupart.php">Makeup Artist</a></li>
                       <hr />
                       <li><a href="mehandi.php">Mehandi Artist</a></li>
                       <hr />
                    </ul>
                 </div>
                 <div class="col-md-3 col-sm-3 col-lg-3">
                    <ul class="multi-column-dropdown">
                       <li><a href="photo.php">Photography</a></li>
                       <hr />
                       <li><a href="sound.php">Sound & DJ</a></li>
                       <hr />
                       <li><a href="Venue_1.php">Venue</a></li>
                       <hr />
                    </ul>
                 </div>
                 <div class="col-md-3 col-sm-3 col-lg-3">
                    <ul class="multi-column-dropdown">
                       <li><a href="cards.php">Wedding Cards</a></li>
                       <hr />
                       <li><a href="Wedplan.php">Wedding Planner</a></li>
                       <hr />
                    </ul>
                 </div>
              </div>
           </div>
        </li>
     </ul>
  </div>

Answer №4

To make the dropdown menu full width, you should add the position-relative class to the main container. Next, remove the position-relative from .navbar-nav > li.nav-item.dropdown, and add width:100% to .dropdown > .dropdown-menu.

.navbar-nav > li{
        padding-left:10px;
        padding-right:10px;
        font-size: 15px;
    }
    .navbar-nav > li.nav-item.dropdown {
        position: inherit;
    }
    .dropdown > .dropdown-menu {
        min-width: 570px;
        margin-top: 8px;
        width: 100%;
    }
    .multi-column-dropdown {
        list-style: none;
        margin-left: 20px;
        padding: 0px;
    }
    .multi-column-dropdown li a {
        display: block;
        clear: both;
        line-height: 1.428571429;
        color: rgb(0, 0, 0);
        white-space: normal;
        margin-top: 10px;
    }
    .multi-column-dropdown li a:hover {
        text-decoration: none;
        color: #f80606;
    }
    .nav-wrapper {
        position: relative;
    }
    @media (max-width: 767px) {
        .dropdown-menu.multi-column {
        min-width: 240px !important;
        overflow-x: hidden;
        }
    }
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 

<nav class="navbar navbar-nav navbar-expand-md navbar-light bg-white sticky-top ">
    <div class="container nav-wrapper">
      <a href="index.php" class="navbar-brand "><img src="images/Logo.png" width="200" height="60"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse text-center" id="collapsenavbar">
         <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
               <a class="nav-link font-weight-bold" href="index.php">Home</a>
            </li>
            <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle font-weight-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
               <div class="dropdown-menu multi-column" aria-labelledby="dropdown01">
                  <div class="row">
                     <div class="col-md-3 col-sm-3 col-lg-3">
                        <ul class="multi-column-dropdown">
                           <li><a href="caterers.php">Caterers</a></li>
                           <hr />
                           <li><a href="decorer.php">Decorator</a></li>
                           <hr />
                           <li><a href="dholwale.php">Dhol Wale</a></li>
                           <hr />
                        </ul>
                     </div>
                     <div class="col-md-3 col-sm-3 col-lg-3">
                        <ul class="multi-column-dropdown">
                           <li><a href="flowrdecor.php">Flower Decorator</a></li>
                           <hr />
                           <li><a href="makeupart.php">Makeup Artist</a></li>
                           <hr />
                           <li><a href="mehandi.php">Mehandi Artist</a></li>
                           <hr />
                        </ul>
                     </div>
                     <div class="col-md-3 col-sm-3 col-lg-3">
                        <ul class="multi-column-dropdown">
                           <li><a href="photo.php">Photography</a></li>
                           <hr />
                           <li><a href="sound.php">Sound & DJ</a></li>
                           <hr />
                           <li><a href="Venue_1.php">Venue</a></li>
                           <hr />
                        </ul>
                     </div>
                     <div class="col-md-3 col-sm-3 col-lg-3">
                        <ul class="multi-column-dropdown">
                           <li><a href="cards.php">Wedding Cards</a></li>
                           <hr />
                           <li><a href="Wedplan.php">Wedding Planner</a></li>
                           <hr />
                        </ul>
                     </div>
                  </div>
               </div>
            </li>

         </ul>
      </div>
    </div>
</nav>

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

What is the best way to maintain the value of variables across different HTML files?

Imagine having a scenario where a page is connected to a .js file. This file contains code that assigns a value to a variable like this: var foo; function bar() { foo = //value generated through user input } bar(); Now the goal is to move t ...

javascripthtml

I'm struggling with organizing my webpage layout using CSS flexbox and CSS grid

Currently, I am working on creating a checkers game using HTML and CSS with the inclusion of CSS Flexbox and CSS Grid for layout design. However, I have encountered an issue where the page is not responsive vertically. When resizing the browser height in C ...

htmlcssflexboxcss-grid

Upgrade the jQuery code from version 1.4.2 min to version 1.10.2 min

Hey there, I'm looking for assistance with updating the code below to use jQuery 1.10.2. The backslashes are present because I am using it with PHP and need to escape special characters. I'm not very familiar with JavaScript and unsure of the ch ...

javascriptjqueryhtmlajax

What are some common reasons why CSS and Bootstrap code can unexpectedly break?

I have been working on two tabs (tab-one, tab-two) where one is visible and the other is hidden. However, there has been an issue where the code breaks between the bottom of tab-one and the top of tab-two, causing some portion of tab-two to be occasionally ...

jqueryhtmlcssbootstrap-4

I'm curious about integrating Bootstrap 4 with Angular 9 - any tips?

Having some trouble with implementing a modal in Angular, can't seem to get it to show up. Bootstrap is being used but the modal isn't functioning correctly. <button type="button" class="btn btn-primary" data-toggle=" ...

angularjsbootstrap-4bootstrap-modalangular9

Tips on modifying the background color of a read-only field in an edit form

Changing the background color of a readonly field in the edit form of Free jqgrid can be a challenge. One potential solution involves specifying a style: .jqgrid-readonlycolumn { background-color: #FFFFDD; } This style is then used in the colmodel e ...

jqueryhtmlcssjqgridfree-jqgrid

Retrieve the index value within a given range

How do I retrieve the index number using PHP? foreach ($array as $index => $value) { // Use $index to access the index number } Is there a way to obtain the index number in Go language? {{ range .posts }} {{ index . }} {{ .Id }} {{ .Name}} ...

htmlloopstemplatesgogo-templates

Tips for aligning navbar-items vertically in a Bootstrap 5.3 navbar

The navbar is currently transparent, but when scrolling down, it has a white background. However, in the white background, it is not vertically centered. I would greatly appreciate it if you could provide the solution as a URL in CodePen Code: <lin ...

htmlcssbootstrap-5

Strategies for accessing elements within a #shadow-root

Having trouble changing the display style inside of the #shadow-root and targeting it. Can I do it through CSS or JS? #retirement-services-modal #rs-two-col::shadow(.wrapper) { display: flex; align-items: center; } ...

htmlcssuser-experienceshadow-root

Is there a way for me to determine when my web browser has completed loading the entire page?

Similar Question: How to Detect When a WebBrowser Has Finished Loading a Page Is there a way to determine if my web browser has completed loading all content on the page? In C#, is it possible to display multiple pages in sequence without allowing na ...

c#html.netbrowser

What is the best way to include PHP code within an HTML tag?

I need help figuring out how to display the value of a variable called 'fname' inside an HTML tag. Below is a snippet of my code where I'm trying to get the input value and print it in a paragraph tag. <?php if (isset($_POST['submit ...

phphtml

Avoid displaying the image when encountering a 404 error, but sometimes a broken image may still appear momentarily

Here is the code snippet I'm currently using: <img ng-show="json.user.picture" ng-src="{{json.user.picture}}" ng-error="json.user.picture = false"> When accessing an image from an external website without permission, a 404 error code is return ...

javascripthtmlcssangularjssrc

Which software is recommended for converting Sass to CSS on a Linux operating system?

Just starting out with Sass and I've run into a snag. Currently following a tutorial that utilizes Scout as the Sass compiler for generating CSS. The issue is that Scout is compatible only with Windows and Mac, while I work on Ubuntu Linux. Any reco ...

csssassfrontend

Using AJAX to dynamically update a DIV when there are changes in the XML data

After dedicating the past four years to solving this problem intermittently, my brain is feeling the strain. I serve as a volunteer designer for a local community project involving a radio station. Our "On Air" module showcases the current and upcoming tr ...

javascriptjqueryhtmlajax

What is the best way to center a button element horizontally within a div element?

I am looking for a way to center a button horizontally without adding CSS directly to the div element (for example, using <div style="text-align: center;">). My goal is to apply CSS code specifically to the button element. <div> <butto ...

htmlcsscentertext-alignmenttext-align

What is causing my radio button event to activate when a separate radio button is selected?

I have implemented the code below to display "pers" and hide "bus," and vice versa. JQuery: $('input[name="perorbus"]').click(function() { if ($(this).attr('id') == 'bus') { $('#showbus&apo ...

javascriptjqueryhtml

Trouble arises when attempting to make an expanding search bar with the :focus-within pseudo-class

I am looking to create a search bar similar to the one on this website: . I attempted to do so using the following code: (Here's a codepen) HTML: <div class="col-md-4 d-flex justify-content-end all-buttons"> <div class="col ...

htmlcss

Attempting to align my navigation bar beside my logo

I've been attempting to position my navigation menu next to my logo, but it keeps displaying below it. Although my coding skills are not top-notch, I am aiming to have the nav element positioned alongside the logo, as shown in my design: HTML: <b ...

htmlcss

Concealing a message within a section that has been minimized to a width of 0

Recently, I've encountered a challenge in attempting to set the width of a section to 0 and have all its contents also disappear. Despite changing the section's width to 0px, the text inside continues to be displayed and even shifts off to the si ...

javascriptjquerycss

Having trouble with my phone screen not displaying my html navbar properly

Hi, I'm currently working on my website using tailwind css. I'm facing an issue with my navbar not displaying in full screen on mobile devices. Can someone please assist me with this? See a screenshot of the bug here You can visit the original ...

htmlcsstailwind-csstailwind-3