How do I create a mobile navbar that display the hamburger icon on mobile view. I want the links to be displayed in block whenever I click on the icon
Have already tried to create it using the hamburger svg icon and set the display to none. But couldn't get the javascript code to toggle the link
Next time, include the code you've already tried. I see you're inquiring about CSS/HTML and JS. Try this to get you started & follow this tutorial from w3school: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp
Here's the CSS portion for the hamburger you're referring to:
/* Style the navigation menu */
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}
/* Style navigation menu links */
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
/* Style the hamburger menu */
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style the active link (or home/logo) */
.active {
background-color: #04AA6D;
color: white;
}
Full tutorial is on the link above.
Related
I am facing a problem with my top navigation menu. On small screens my menu is opened by clicking the hamburger icon. However, I want the menu to collapse after clicking on one of the items. I hope you guys love to help this newbie. Thank you.
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
Home
Floor Plan
Address
Project Overview
Location Advantage
Download
Similar Projects
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
When Im running this code works fine but not disappearing the dropdown. Hope you guys help me.
Add to each one of your anchor tags
onclick="myFunction()"
To toggle classes on an element use
element.classList.toggle()
Use meaningful variable names like myTopNav instead of x.
No changes to your CSS.
MDN classList
function myFunction() {
var myTopNav = document.getElementById("myTopnav");
myTopNav.classList.toggle("responsive");
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div class="topnav" id="myTopnav">
Home
Floor Plan
Address
Project Overview
Location Advantage
Download
Similar Projects
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
I am stuck with a conflict for a "Sticky" and "Responsive" top menu.
When it is not scrolled and I click the BARS button to open the menu (in responsive state) it works ok. If I am scrolled down and the menu is "STICKY" it lost it "position:fixed" and goes all on top (back to position:relative).
Here is my codepen :
codepen for top navigation script conflict
// Function that expand the top menu when collapsed (responsive)
function opennav() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
{x.className += " responsive";}
else
{x.className = "topnav";}}
// This is the function that stick the menu when scrolling
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunction() {
if
(window.pageYOffset >= sticky)
{navbar.classList.add("sticky");}
else
{navbar.classList.remove("sticky");}
}
body { margin: 0; font-family: Arial, Helvetica, sans-serif;}
.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;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
/* Responsive CSS for the top navigation menu */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Sticky CLASS that will be added when scrolling */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="opennav()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<!-- Put large text in this <p> to scroll -->
<p>LOREM IPSUM</p>
</div>
</body>
First, don't use float. We are not leaving in 1995. Go with flexbox or grid.
Second, your code is all over the place. Multiple script tags in HTML section, the multiple usages of the same media query... It's difficult to read your code.
Third, what you want to do can be done just by using CSS. You only need JS to open submenu. To do that just add a class.
I suggest you watch a Youtube video about the responsive menu.
So I have a left navigation bar that opens on hover and inside it a button that has dropdown content also on hover. But right now the dropdown-content is appearing below the button (inside the left-nav). I want the dropdown-content to appear beside the button, to the right of the left-nav(so outside the left-nav).
Any ideas?
<div id="mySidenav" class="sidenav" style="background-image: linear-gradient(#7C0D0D, #DC0404);">
<div class="dropdown">
<button class="dropbtn" [ngStyle]="{'color': 'white','font-style': 'bold', 'font-size': '20.01px', 'font-family':'sans-serif'}"> <img src="assets/icon-overview-white.png" style="padding-right:14px; ">Screening</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
/* The side navigation menu */
.sidenav {
height: 70%;
width: 55px;
position: fixed;
z-index:0;
top:200px;
left:0px;
right:50px;
background-color: #ff0000;
overflow-x:hidden;
padding-top: 0px;
transition: 0.5s;
}
/* ON HOVER */
.sidenav:hover {
width: 250px;
}
.sidenav normalb:hover {
background-color: #4F0909;
}
.buttonGroup {
align-content: baseline;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: #4F0909;
}
.sidenav h1 {
background-color: #850101; /* Blue background */
border: thin; /* Remove borders */
color: white; /* White text */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
overflow:hidden;
}
.sidenav h1:hover {
background-color: #4F0909;
}
/* The navigation menu links */
.sidenav a {
padding-left:10px;
text-decoration: none;
font-size: 18px;
color: #f1f1f1;
display:block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus {
color: #f1f1f1;
}
#main {
transition: margin-left .5s;
padding: 20px;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #640303;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #D90909;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #D60707;
}
If you are sure of the width of your left navigation bar, then you can set the left property of the .dropdown-content. Since the dropdown-content is absolute, setting the left value will shift the dropdown to the right.
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #640303;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top:0;
left: 144px;
/* Here I have set the width (minus padding) of the dropdown-content */
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #D90909;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #D60707;
}
<div id="mySidenav" class="sidenav" style="background-image: linear-gradient(#7C0D0D, #DC0404);">
<div class="dropdown">
<button class="dropbtn" style="color: white;font-style: bold; font-size: 20.01px; font-family:sans-serif;"> <img src="assets/icon-overview-white.png" style="padding-right:14px; ">Screening</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
So basically I have a nav bar that floats left. The page is responsive so that when the screen is below a certain size, the nav bar disappears (except the Home link) and a hamburger drop-down menu pops up on the right. What I'm trying to do is figure out how to make the navigation bar centered and have it completely disappear when the screen size is reduced and have the hamburger icon appear and become centered on the screen.
HTML:
<div class="topnav" id="myTopnav">
<nav>
Home
History
Information
Gallery
Videos
Exercises
Contact
Links
☰
</nav>
</div>
CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #000000;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #FFFFFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 2.25em;
margin-bottom: 1.25%;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #2C3539;
color: #FFFFFF;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for
the first one ("Home"). Show the link that contains should open and close
the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the
user clicks on the icon. This class makes the topnav look good on small
screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
Javascript:
<script>
/* Toggle between adding and removing the "responsive" class to topnav when
the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Any help in doing this would be appreciated!
Removing floats and display: block, and using inline-block may fix your problems
display: inline-block;
Your new code:
/* Add a black background color to the top navigation */
.topnav {
background-color: #000000;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 2.25em;
margin-bottom: 1.25%;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #2C3539;
color: #FFFFFF;
}
:D
This question already has answers here:
Place an item at a fixed position in a scrolling div
(2 answers)
Closed 5 years ago.
I have two navbar one for full page and another for only div of page , i want to make my second div fixed on top after scrolling over that div .
<div class="navbar navbar-fixed-top">
Home
News
Contact
</div>
My html for second navbar
.navbar {
overflow: hidden;
background-color: #333;
position: absolute;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
My css is here. I want second navbar top of the page only when the div is scroll down.I am poor at js.
.element-you-want-to-stick {
position: -webkit-sticky;
position: sticky;
top: 0;
}
from this