html - How do I get rid of the gap between two different vertical, animated dropdown menus?

I've been trying to make the UI of my profile/website look cleaner.
Previously, I asked for some help on how to make my drop-down menus have a smoother animation.
Now, it looks great on the web version! But when I'm viewing the mobile layout, my drop-down menus (nav-link dropdown-toggle) have a problem. When opening the menu on the navbar, there are large gaps between my "Browse" and "Submit" drop-down titles.
I'd like to see if I can get rid of that space while still keeping the animation.
Is this a possibility? Here's the CSS and HTML:

/* Makes the dropdown menu fall downwards*/
.navbar-nav .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
}

.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar-nav .dropdown-menu {
  transition-delay: 0.1s;
}

.navbar-nav .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
}

/*makes the dropdown menu have movement inside the boxes*/
.dropdown-item {
  width: 30px;
  height: 30px;
  transition: height 0.3s;
  position: sticky;
  transition-timing-function: linear;
}

.dropdown-item:hover {
  height: 35px;
}

.dropdown-item:hover {
  opacity: 1;
  visibility: visible;
}

/*adds a small bounce to hoverable items*/
.side-nav a {
  transition: transform 0.3s ease, transform 0.3s ease;
  transition-timing-function: linear;
}

.side-nav a:hover {
  transform: translateY(-1px);

}

.card.d-block.p-3.my-md-3 a {
  transition: transform 0.3s ease, transform 0.3s ease;
  transition-timing-function: linear;
}

.card.d-block.p-3.my-md-3 a:hover {
  transform: translateY(-1px);
}

a.mb-2 {
  transition: transform 0.3s ease, transform 0.3s ease;
  transition-timing-function: linear;
}

a.mb-2:hover {
  transform: translateY(-1px);
}

<link rel="stylesheet" href=".5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Container -->
<div id="container" class="page-container page-container-user">
  <a id="top"></a>
  <!-- Top Bar -->
  <nav class="navbar navbar-toggleable-sm navbar-inverse header" data-topbar role="navigation" id="header">

    <!-- Mobile header toggle -->
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#headerContent"
        aria-controls="headerContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- End mobile header toggle -->

    <!-- Site name -->
    <a class="navbar-brand" href="">TOYHOU.SE</a>
    <!-- End site name -->

    <!-- Buttons -->
    <div class="collapse navbar-collapse" id="headerContent">

      <!-- Left Nav Section -->
      <ul class="navbar-nav mr-auto navbar-left">
        <li class="nav-item">
          <a class="nav-link" href="">
                        <span class="fa fa-home"></span> Profile 
                    </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">
                        <span class="fa fa-comments"></span> Forums 
                    </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownBrowse" > <span class="fa fa-fw fa-search"></span> Browse </a>
          <div class="dropdown-menu" id="dropdownBrowse">
            <h6 class="dropdown-header">Characters</h6>
            <a class="dropdown-item" href=""><i class="fa fa-fire fa-fw mr-1"></i> Popular </a>
            <a class="dropdown-item" href=""><i class="fa fa-binoculars fa-fw mr-1"></i> Feed </a>
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-clock mr-1"></i> Recent </a>
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-search mr-1"></i> Search </a>
            <h6 class="dropdown-header">Browse</h6>
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-book mr-1"></i> Literatures </a>
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-globe mr-1"></i> Worlds </a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownCreate" > <span class="fa fa-fw fa-plus"></span> Submit </a>
          <div class="dropdown-menu" id="dropdownCreate">
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-user mr-1"></i> Character </a>
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-newspaper mr-1"></i> Bulletin </a>
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-image mr-1"></i> Image </a>
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-image mr-1"></i> Multi-Images </a>
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-book mr-1"></i> Literature </a>
            <a class="dropdown-item" href=""><i class="fa fa-fw fa-globe mr-1"></i> World </a>
          </div>
        </li>
      </ul>
      <!-- End Left Nav Section -->

/* Makes the dropdown menu fall downwards*/
.navbar-nav .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
}

.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar-nav .dropdown-menu {
  transition-delay: 0.1s;
}

.navbar-nav .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
}

/*makes the dropdown menu have movement inside the boxes*/
.dropdown-item {
  width: 30px;
  height: 30px;
  transition: height 0.3s;
  position: sticky;
  transition-timing-function: linear;
}

.dropdown-item:hover {
  height: 35px;
}

.dropdown-item:hover {
  opacity: 1;
  visibility: visible;
}

/*adds a small bounce to hoverable items*/
.side-nav a {
  transition: transform 0.3s ease, transform 0.3s ease;
  transition-timing-function: linear;
}

.side-nav a:hover {
  transform: translateY(-1px);

}

.card.d-block.p-3.my-md-3 a {
  transition: transform 0.3s ease, transform 0.3s ease;
  transition-timing-function: linear;
}

.card.d-block.p-3.my-md-3 a:hover {
  transform: translateY(-1px);
}

a.mb-2 {
  transition: transform 0.3s ease, transform 0.3s ease;
  transition-timing-function: linear;
}

a.mb-2:hover {
  transform: translateY(-1px);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Container -->
<div id="container" class="page-container page-container-user">
  <a id="top"></a>
  <!-- Top Bar -->
  <nav class="navbar navbar-toggleable-sm navbar-inverse header" data-topbar role="navigation" id="header">

    <!-- Mobile header toggle -->
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#headerContent"
        aria-controls="headerContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- End mobile header toggle -->

    <!-- Site name -->
    <a class="navbar-brand" href="https://toyhou.se">TOYHOU.SE</a>
    <!-- End site name -->

    <!-- Buttons -->
    <div class="collapse navbar-collapse" id="headerContent">

      <!-- Left Nav Section -->
      <ul class="navbar-nav mr-auto navbar-left">
        <li class="nav-item">
          <a class="nav-link" href="https://toyhou.se/DeclineOfMySanity">
                        <span class="fa fa-home"></span> Profile 
                    </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://toyhou.se/~forums">
                        <span class="fa fa-comments"></span> Forums 
                    </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownBrowse" > <span class="fa fa-fw fa-search"></span> Browse </a>
          <div class="dropdown-menu" id="dropdownBrowse">
            <h6 class="dropdown-header">Characters</h6>
            <a class="dropdown-item" href="https://toyhou.se/~browse/popular"><i class="fa fa-fire fa-fw mr-1"></i> Popular </a>
            <a class="dropdown-item" href="https://toyhou.se/~browse/feed"><i class="fa fa-binoculars fa-fw mr-1"></i> Feed </a>
            <a class="dropdown-item" href="https://toyhou.se/~browse/recent"><i class="fa fa-fw fa-clock mr-1"></i> Recent </a>
            <a class="dropdown-item" href="https://toyhou.se/~browse/search"><i class="fa fa-fw fa-search mr-1"></i> Search </a>
            <h6 class="dropdown-header">Browse</h6>
            <a class="dropdown-item" href="https://toyhou.se/~library/popular"><i class="fa fa-fw fa-book mr-1"></i> Literatures </a>
            <a class="dropdown-item" href="https://toyhou.se/~worlds"><i class="fa fa-fw fa-globe mr-1"></i> Worlds </a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownCreate" > <span class="fa fa-fw fa-plus"></span> Submit </a>
          <div class="dropdown-menu" id="dropdownCreate">
            <a class="dropdown-item" href="https://toyhou.se/~characters/create"><i class="fa fa-fw fa-user mr-1"></i> Character </a>
            <a class="dropdown-item" href="https://toyhou.se/~bulletins/create"><i class="fa fa-fw fa-newspaper mr-1"></i> Bulletin </a>
            <a class="dropdown-item" href="https://toyhou.se/~images/upload"><i class="fa fa-fw fa-image mr-1"></i> Image </a>
            <a class="dropdown-item" href="https://toyhou.se/~images/multi-upload"><i class="fa fa-fw fa-image mr-1"></i> Multi-Images </a>
            <a class="dropdown-item" href="https://toyhou.se/~literatures/create"><i class="fa fa-fw fa-book mr-1"></i> Literature </a>
            <a class="dropdown-item" href="https://toyhou.se/~worlds/create"><i class="fa fa-fw fa-globe mr-1"></i> World </a>
          </div>
        </li>
      </ul>
      <!-- End Left Nav Section -->

Here's a screenshot of the issue:

What I'd like is to have the nav-link dropdown-toggle line up vertically with each other(like how the "Profile", "Forums" and "Browse" sections are) when the drop-down menu is hidden.

Share Improve this question edited Mar 12 at 22:29 Mister Jojo 22.6k6 gold badges25 silver badges44 bronze badges asked Mar 12 at 21:11 Sarah Z 232 bronze badges

2 I made you a snippet. Please updated it to a minimal reproducible example – mplungjan Commented Mar 12 at 21:22
I don't think I quite understand your designed behavior/problem description. Are you saying you want the 'Submit' menu option to be immediately under the 'Browse' menu option, and then, when you hover over 'Browse', expand the 'Browse' submenu and push the 'Submit' menu button down? Or do you want the 'Submit' menu button to be covered by the 'Browse' submenu while said submenu is open? – TylerH Commented Mar 12 at 21:34
Ah, sorry! I’m not great at describing things haha— it would be the first one. I’d like for the submenu(s) to be collapsed/hidden by default (including that space between “Browse” and “Submit”), THEN when you hover on “Browse” and it expands, the “Submit” menu button is pushed down as well. I believe the style term for it is Accordion? On W3 Schools, they have an article called How TO - Collapsibles/Accordion, and the interactive example at the top of the article gives an idea of what I mean from a visual standpoint. – Sarah Z Commented Mar 12 at 21:59
I don’t believe so. From my limited understanding, I’m only using HTML and CSS. The website also supports bootstrap 4. – Sarah Z Commented Mar 12 at 22:45
You should take a look at FreeFrontend. You should find a similar menu there, and there are always accompanying explanations. Personally, I find your HTML code too complicated for a simple menu, you should use the <menu> and associated <li> tags. – Mister Jojo Commented Mar 13 at 0:06

| Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

I figured it out! My CSS was fighting the web browser layout because I didn't apply the @media tag to the different parts I wanted to remain the same. I'm pretty new to CSS and HTML so I didn't even know that was a thing, but it works now! I applied this to the CSS:

@media (max-width: 1000px) {
    .navbar-nav .dropdown-menu {
        display: none;
        opacity: 100%;
        visibility: hidden;
        transition: none, transform none;
        transform: none;
    }
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0); 
    }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How do I get rid of the gap between two different vertical, animated dropdown menus? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)