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>

<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>

POPULAR ONLINE

JS code not working as expected

Learn, Share, Build

Woocommerce programmatically calculate variation result [on hold]

Force Autocomplete to Ignore for a Form’s Message Field

Library for Exchange ActiveSync (EAS) protocol on Android

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

CSS

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

$Can't find a persistence unit named in src\main\resourses$

Java

Can't find a persistence unit named in src\main\resourses

I get error :(

353

Node.js

node AJV validation schema

Using version 65

248