I'm currently facing an issue while trying to validate a mobile dropdown in an HTML5 page.
Upon validation, I encountered an error stating that div elements are not allowed inside buttons. When attempting to rectify this by wrapping the button with a div, the layout doesn't display correctly. The first button appears fine, but the second button or "X" is always visible and incorrectly positioned.
FIRST BUTTON - This is how the first button (open navigation) should appear.
SECOND BUTTON - This is how the second button (close navigation) should look like.
The HTML code in question:
<button class="navbar-toggler pull-xs-right hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
<div class="hamburger-icon"></div>
</button>
<ul class="nav-dropdown collapse pull-xs-right nav navbar-nav navbar-toggleable-sm" id="exCollapsingNavbar">
<li class="nav-item nav-btn"><a class="nav-link btn btn-primary" href="login.php" id="c1">Login</a></li>
<li class="nav-item nav-btn"><a class="nav-link btn btn-primary" href="index.php" id="c2">Register</a></li>
</ul>
<button hidden="" class="navbar-toggler navbar-close" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
<div class="close-icon"></div>
</button>
The CSS styling involved:
.navbar-dropdown .hamburger-icon {
content: "";
width: 16px;
-webkit-box-shadow: 0 -6px 0 1px,0 0 0 1px,0 6px 0 1px;
-moz-box-shadow: 0 -6px 0 1px,0 0 0 1px,0 6px 0 1px;
box-shadow: 0 -6px 0 1px,0 0 0 1px,0 6px 0 1px; }
.navbar-dropdown .close-icon {
position: relative;
width: 21px;
height: 21px;
overflow: hidden; }
.navbar-dropdown .close-icon::before, .navbar-dropdown .close-icon::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px; }
.navbar-dropdown .close-icon::before {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg); }
.navbar-dropdown .close-icon::after {
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
My attempts at resolving this by nesting div elements within buttons resulted in:
<div class="hamburger-icon">
<button>
</div>
And so forth...
- The second button (close navigation) is displayed when not in mobile view.
- The first button (open navigation) isn't visible, yet still clickable where it should be, with the second button (close navigation) being shown.
- The second button (close navigation) goes missing entirely.
How can I achieve the desired functionality as shown in the first two images without placing div elements inside the buttons?