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>
Related
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.
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.
When I resize the page to see if it would work on a phone, the home section of the navigation bar won't centre properly...
It is extremely frustrating that it won't align correctly so how can I fix it? Thank you in advance if you do read and respond to this.
The site won't let me post this unless I have more details so aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8"> <!-- Set character set -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Makes the website work on all devices and screen resolutions -->
<link rel="stylesheet" href="style.css">
<title>Roan Taylor's Portfolio</title>
</head>
<!-- Navigation bar -->
<!-- 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="navbar" id="navbar">
<li>"Strive not to be a success, but rather of value."-A.E.</li>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
Home
About
Projects
Contact
<!-- <a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a> -->
</div>
<hr>
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("navbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
/* Add a black background color to the top navigation */
.navbar {
background-color: white;
overflow: hidden;
margin-left: 1.2%;
margin-right: 1.2%;
margin-top: 1%;
margin-bottom: 1.5%;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
width: 13%;
text-decoration: none;
font-size: 2vw;
}
.navbar li {
float: right;
display: block;
color: black;
text-align: center;
width: 45%;
text-decoration: none;
font-size: 2vw;
font-style: italic;
}
/* Change the color of links on hover */
.navbar a:not(.active):hover {
color: rgb(0, 162, 200);
transition: 0.75s;
}
/* Add an active class to highlight the current page */
.navbar a.active {
color: rgb(51, 51, 255);
}
/* Hide the link that should open and close the navbar on small screens */
.navbar .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 navbar (.icon) */
#media screen and (max-width: 700px) {
.navbar a {
display: none;
}
.navbar li {
float: left;
font-size: 4vw;
width: 75%;
}
.navbar a.icon {
float: right;
display: block;
width: 25%;
font-size: 8vw;
}
}
/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 700px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive a.icon {
position: relative;
}
/* Why won't home centre here??? */
.navbar.responsive a:not(.icon) {
float: none;
display: block;
text-align: center;
font-size: 7vw;
width: 100%;
}
}
</style>
<body>
</body>
</html>
You should put all your list items into one container and then apply flex properties:
<div class="container">
Home
About
Projects
Contact
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
Ok, I've got a tab bar to scroll using touch swipe function and on a desktop to scroll and click
(for some reason when I add code into codepen the java code does not work, not sure why) it works when loaded on to my server
Sample attached: http://www.tcdesignstamford.co.uk
At the moment when you scroll/swipe to the next tab when the screen size is to small you cannot see which tab bar is being selected.
Is there a way to get the selected tab bar title at the top to centre so it does not go off screen??
[codepen code][2]
Hope you can help?
https://codepen.io/tim-cross-the-encoder/pen/wZLvmy
Thanks
Tim
Try to use the bootstrap library, and create a responsive navigation menu:
try to open this code snippet in responsive view, this will be collapsed:
and if you still want to use your own navigation menu, then you have to change design structure of HTML, there are a lot of errors, I just watched your HTML structure from URL link you provided.
if still want to your own navigation menu, let me know, I will create one!
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;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {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;
}
}
<!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>
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
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