Responsive NavBar Dropdown for Aspnet Only CSS and Script

206
May 11, 2018, at 08:23 AM

Having issue with dropdown Navbar with CSS, it will overlap my button. If i change

<a asp-controller="Home" asp-action="Category" class="dropbtn">Category</a>

to

<button class="dropbtn">Category
   <i class="fa fa-caret-down"></i>
</button>`

it will work. why is that so? did i done something wrong somewhere?

https://jsfiddle.net/0tugk2L5/

Answer 1

I have edited your css file, use this and you issue will be resolved.

body {margin:0;font-family:Arial}
.topnav {
  background-color: #333;
  float:left;
  width:100%;
  position:relative;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.active {
  background-color: #4CAF50;
  color: white;
}
.topnav .icon {
  display: none;
}
.dropdown {
    float: left;
}
.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top:48px;
}
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}
.dropdown:hover .dropdown-content {
    display: block;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
Answer 2

you can use display flex. it will solve your problem, fiddle

body {margin:0;font-family:Arial} 
 
.topnav { 
 display: flex; 
  background-color: #333; 
} 
 
.topnav:after { 
   content: ''; 
   display: table; 
   clear: both; 
} 
 
.topnav a { 
  display: block; 
  color: #f2f2f2; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
  font-size: 17px; 
} 
 
.active { 
  background-color: #4CAF50; 
  color: white; 
} 
 
.topnav .icon { 
  display: none; 
} 
 
 
.dropdown .dropbtn { 
    font-size: 17px;     
    border: none; 
    outline: none; 
    color: white; 
    padding: 14px 16px; 
    background-color: inherit; 
    font-family: inherit; 
    margin: 0; 
} 
 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 
 
.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 
 
.topnav a:hover, .dropdown:hover .dropbtn { 
  background-color: #555; 
  color: white; 
} 
 
.dropdown-content a:hover { 
    background-color: #ddd; 
    color: black; 
} 
 
.dropdown:hover .dropdown-content { 
    display: block; 
}
<div class="topnav" id="myTopnav"> 
                <a asp-controller="Home" asp-action="index">Home</a> 
                <div class="dropdown"> 
                    <a asp-controller="Home" asp-action="Category" class="dropbtn">Category</a> 
                        <i class="fa fa-caret-down"></i> 
                    <div class="dropdown-content"> 
                        <a asp-controller="Home" asp-action="AddCategory">Add Category</a> 
                    </div> 
                </div> 
                <div class="dropdown"> 
                    <a asp-controller="Home" asp-action="LeaveType" class="dropbtn">Leave Type</a> 
                        <i class="fa fa-caret-down"></i> 
                    <div class="dropdown-content"> 
                        <a asp-controller="Home" asp-action="AddLeave">Add Leave Type</a> 
                    </div> 
                </div> 
                <a href="javascript:void(0);" style="font-size:15px; width:75%;" class="icon" onclick="myFunction()">&#9776;</a> 
            </div>

Rent Charter Buses Company
READ ALSO
My code does not show up in website? [on hold]

My code does not show up in website? [on hold]

I have a piece of code that does not show up in my html when I put it at the end of the file, but when I change the order it shows upI really have no idea why it happens

143
Unable to resolve image in web app

Unable to resolve image in web app

I'm trying to insert a background image on an element in an Angular web app I'm working on, but for some reason the relative path for the image breaks my app

136
node AJV validation schema

node AJV validation schema

Using version 65

248