I have created navigation bar on my web-page and I've taken help from W3School(https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp) for this. I want to place navigational links on right side and their order should be from 'left to right'. But the position(order) of buttons are from 'right to left' as shown in below figure. Can somebody guide me where am I doing mistake in my code? I am beginner to web development.
Desired Output should be something like this:
another example
Order
Here is my code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color:#37312f;
padding: 12px 14px;
}
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 12px 14px;
text-decoration: none;
font-size: 17px;
}
.topnav a.logo {
font-size: 25px;
font-weight: bold;
color: #fff;
}
.topnav-right {
float:left;
/*height: 53px;*/
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 12px 14px;
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: -de1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 14px;
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;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</form>
</body>
</html>
Your .topnav a css class contains
float: right;
And .dropdown css class also contains
float: right;
Change it to float: left;
.topnav a {
float: left; <= Change here from right to left
color: #f2f2f2;
text-align: center;
padding: 12px 14px;
text-decoration: none;
font-size: 17px;
}
.dropdown {
float: left; <= Change here from right to left
overflow: hidden;
}
Also change in .topnav-right css class,
.topnav-right {
float: right; <= Change here left to right
}
And make your chnages in HTML like
<div class="topnav" id="myTopnav">
<div class="topnav-right">
...
</div>
</div>
So finally your code will be,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
body {
margin: 0;
font-family: Arial
}
.topnav {
overflow: hidden;
background-color: #37312f;
padding: 12px 14px;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 14px;
text-decoration: none;
font-size: 17px;
}
.topnav a.logo {
font-size: 25px;
font-weight: bold;
color: #fff;
}
.topnav-right {
float: right;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 12px 14px;
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: -de1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 14px;
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;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div class="topnav" id="myTopnav">
<div class="topnav-right">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</form>
</body>
</html>
Just removed float:right from topnav a and added display:flex to .topnav, so that it will be aligned in line horizontally.
When your are applying float-right to each <a> element, CSS individually floating them to the right which leads to the inversion of order.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color:#37312f;
padding: 12px 14px;
display: flex;
justify-content: flex-end;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 12px 14px;
text-decoration: none;
font-size: 17px;
}
.topnav a.logo {
font-size: 25px;
font-weight: bold;
color: #fff;
}
.topnav-right {
float:left;
/*height: 53px;*/
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 12px 14px;
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: -de1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 14px;
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;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</form>
</body>
</html>
I dont detect any mistake try to copy this code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.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;
overflow: hidden;
}
.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 {
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;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Related
I have tried to follow this tutorial, but I can't seem to find out why the dropdown menu won't show up at all when hovering over the dropdown button in the nav bar.
This is the HTML part of the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
New
Sales
Account
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
This is the CSS part of the code:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 30px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.new_sale {
background-color: green;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
The problem is that you are hiding the content which goes over the boundaries of your navbar and dropdown.
You need to remove
overflow: hidden;
from your #navbar and .dropdown class, check this fiddle
So I'm looking at the code on w3schools.com and there are a few good examples and I'm trying to make heads or tails of it all. But they don't offer instructions on customizing the code for a third level of menus. Could someone break this code down for me so I can add multiple levels of menus at will?
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Title</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Also could someone explain to me here where and how this code tells the browser the overall width of the navbar. I tried someone else code on here and the nav bar was stuck at only 150px. When I changed the width values it got all buggy. So I know I'm just not understanding where this is determined in the code.
Update: Thanks to one of the answers I've figured out how to get the tertiary menu in and fumbled through getting the menu to pop out to the right. Now my issue is that it extends the dropdown menu under "Link 3" as though it were making room for the links below it. How would I remove this? Here's my current code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Title</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
width: 100%; /*red background color width*/
text-align: start; /*text inside in red background color*/
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content-sub {
display: none;
position: relative;
top: -46px;
right: -300px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 300px; /*block width*/
}
.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;
width: 300px; /*block width*/
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-sub:hover .dropdown-content-sub {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
<div class="dropdown-sub">
<button class="dropbtn">Link 3
<i class="fa fa-caret-right"></i>
</button>
<div class="dropdown-content-sub">
Link 4
Link 5
Link 6
</div>
</div>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Update 2 Final: So it seems my changing the position of the third tier from absolute to relative caused the undesired effect. Simply switching it back solved it and it all now works. :) I had to change the "top" position of the button after that but that was easy to figure out. Now I should be able to just place my links in each menu item and I'm good to go! :) Thanks for the help!
See updates in OP. Thanks to #JannesCarpentier and one other anonymous user for the help! Here's the code tweaked from w3schools.com to get 3-tiered hover navbar.
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Title</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
width: 100%; /*red background color width*/
text-align: start; /*text inside in red background color*/
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content-sub {
display: none;
position: absolute;
top: 85px;
right: -300px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 300px; /*block width*/
}
.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;
width: 300px; /*block width*/
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-sub:hover .dropdown-content-sub {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
<div class="dropdown-sub">
<button class="dropbtn">Link 3
<i class="fa fa-caret-right"></i>
</button>
<div class="dropdown-content-sub">
Link 4
Link 5
Link 6
</div>
</div>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
width: 100%; /*red background color width*/
text-align: start; /*text inside in red background color*/
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content-sub {
display: none;
position: absolute;
top: 85px;
right: -300px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 300px; /*block width*/
}
.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;
width: 300px; /*block width*/
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-sub:hover .dropdown-content-sub {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
<div class="dropdown-sub">
<button class="dropbtn">Link 3
<i class="fa fa-caret-right"></i>
</button>
<div class="dropdown-content-sub">
Link 4
Link 5
Link 6
</div>
</div>
</div>
</div>
</div>
i am setting a Menu Bar with drop-down but the Problem is you can see In below code
I have tried By Changing Margin and Padding But None of the thing worked
.topnav {
overflow: hidden;
background-color: white;
position: relative;
margin: -10px -126px;
}
.topnav #myLinks {
display: visible;
background-color: white;
margin: 10px 20px;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
top: 0;
margin: 5px 166px;
}
.topnav a:hover {
background-color: #ddd;
}
.active {
background-color: #4CAF50;
color: white;
float: right;
margin: 0px 81px;
}
}
div#myLinks {
margin: 0px 20px 0px 107px;
}
<div class="topnav">
<a href="#home" class="active">
<img src="Images/logo-black.png" alt="AudiLogo" />
</a>
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars">Menu</i>
</a>
</div>
</div>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
I expect a dropdown but it is taking within the same Menu Line
but the actual output i want is a drop down below the Menu when I click on it.
enter code here
Try this code
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
I edited your code to show the sub navigation as you wanted to show. It still needs some styling and I assumed you wanted to use javascript as you did in your original code.
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.topnav {
overflow: hidden;
background-color: white;
position: relative;
margin: -10px -126px;
}
.topnav #myLinks {
display: visible;
background-color: white;
margin: 10px 20px;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
top: 0;
margin: 5px 166px;
}
.topnav a:hover {
background-color: #ddd;
}
.active {
background-color: #4caf50;
color: white;
float: right;
margin: 0px 81px;
}
div#myLinks {
margin: 0px 20px 0px 107px;
}
div#myLinks > a:first-child {
margin-top: 52px;
}
div#myLinks > a {
color: black;
margin-left: 100px;
padding-left: 60px;
}
<div class="topnav">
<a href="#home" class="active">
<img src="Images/logo-black.png" alt="AudiLogo" />
</a>
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars">Menu</i>
</a>
</div>
</div>
pls try this code
<html>
<head>
<style>
.topnav {
overflow: hidden;
background-color:white;
position: relative;
/*margin: -10px -126px;*/
}
.topnav #myLinks {
display: none;
background-color:white;
margin:48px 0px;
}
.topnav #myLinks a {
color: #000;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
top: 0;
/*margin: 5px 166px;*/
}
.topnav a:hover {
background-color: #ddd;
}
.active {
background-color: #4CAF50;
color: white;
float:right;
margin: 0px;
}
}
div#myLinks {
margin: 0px 20px 0px 107px;
}
</style>
<script>
function myFunction(){
var menu = document.getElementById("myLinks");
if(menu.style.display == "block"){
menu.style.display = "none";
}
else{
menu.style.display = "block";
}
}
</script>
</head>
<body>
<div class="container-fluid">
<header>
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">
<img src="Images/logo-black.png" alt="AudiLogo">
</a>
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars">Menu</i>
</a>
</div>
</header>
</div>
</body>
</html>
Can someone help me to align the search bar beside my icon? This is how it currently looks like.
Before expanding :
After expanding :
I want to have my search bar beside my image after expanding, can someone help me out here? Thanks!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
.topnav {
background-color: transparent;
}
.topnav a {
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
padding-top: 5px;
}
.hehe {
float: right;
padding-top: 5px;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: transparent;
color: skyblue;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 900px) {
.topnav a:not(:nth-child(-n+2)),
.dropdown .dropbtn {
display: none;
}
.topnav a:not(:nth-child(-n+2)),
.hehe {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .hehe {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.topnav.responsive .hehe {
display: block;
width: 100%;
text-align: left;
}
}
<div class="topnav" id="myTopnav" ng-controller="searchController">
<img ng-src="" />LOGO
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here...">
<div class="hehe">
Developer
Data Enquiry
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
</div>
</div>
☰
</div>
Try adding, position: relative; to the nav, and an absolute for .searchFeature
.topnav{
position: relative;
}
.searchFeature{
position: absolute;
top: 15px;
left: 65px;
}
Here you have a codepen!
Alright, what I am trying to do is, I want the button beside my text box to be aligned beside the text box whenever my page resize, which would cause my text box to shrink or expand accordingly ( as you can see below in the following snippet) Can someone help me out here? Thanks in advance for the help!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
.topnav {
background-color: transparent;
}
.topnav a {
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
padding-top: 5px;
}
.hehe {
float: right;
padding-top: 5px;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: transparent;
color: skyblue;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 900px) {
.topnav a:not(:nth-child(-n+2)),
.dropdown .dropbtn {
display: none;
}
.topnav a:not(:nth-child(-n+2)),
.hehe {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 900px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .hehe {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.topnav.responsive .hehe {
display: block;
width: 100%;
text-align: left;
}
}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
position: absolute;
top: 18px;
left: 75px;
}
.test {
position: absolute;
top: 20px;
left: 350px;
}
<div class="topnav" id="myTopnav" ng-controller="searchController">
<img ng-src="" />LOGO
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."><button class="test">Test</button>
<div class="hehe">
Developer
Data Enquiry
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
</div>
</div>
☰
</div>
Remove absolute positioning from both .test and .searchFeature, then wrap them in a flexbox. I also recommend adding a min-width to the input.
HTML:
<div class="search-wrapper">
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here...">
<button class="test">Test</button>
</div>
CSS:
.search-wrapper {
display: flex;
flex-direction: row;
}
.test {}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
}