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>
Related
I'm trying to add a dropdown menu to the mobile version of my site, but it doesn't seem to be working (I'm very new to web design).
The dropdown menu is correctly shown by clicking on the correspondent icon; the problem is that it is also shown by clicking at any point of the topnav menu. I just want the dropdown menu to appear only by clicking on the dropdown menu icon. Moreover, I'd the dropdown menu to disappear by clicking at any point outside of it. This is my 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, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
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;
}
}
</style>
</head>
<body>
<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>
<script>
let topnav = document.querySelector("#myTopnav");
topnav.onclick = function() {
this.classList.toggle('responsive');
}
</script>
</body>
</html>
Here you can try my code.
Hope you guys will help me.
You can check this answer. I have done the first part and another person helped me to do the second part.
Code below-
<!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, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #146875;
}
.topnav a {
float: left;
display: block;
color: #ffffFF; /*font color*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #00e5ff; /*top nav menu back hover color*/
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 900px) /* Mobile Screen Breakdown */
{
.topnav a:not(:nth-child(-n+3)) {
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;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav" >
Home
about Us
Address
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var disappear = document.getElementById('myTopnav');
window.onclick = function(event) {
if (event.target.parentNode !== disappear && event.target.parentNode.parentNode !== disappear){
disappear.className = "topnav";
}
}
</script>
</body>
</html>
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;
}
I am a CSS beginner, so far using css only to change colours and size, while copying and pasting for things like JavaScript. Thus I am trying to adjust an responsive navigation bar from w3schools.com that generally looks what I require.
My problem is when the screen width is reduced to mobile width, the result, as well as the three lines (hamburger), there is also the word 'Home' rather than just the three lines. The code I've used comes from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav, while my test page is at
https://www.abelard.org/mobile/test1.php.
It looked to me as if the code section
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
It appeared to me to be the relevant area controlling the nav bar display, my alteration removing the line .topnav a:not(:first-child) {display: none;} makes no difference. I cannot see where else might help.
html...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img src="/library/menu-burger-grn.png">
</a>
</div>
<div style="padding-left:16px">
<h2>test page for nav bar</h2>
<p>First step</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
style.css...
<style>
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;
}
#media screen and (max-width: 600px)
.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;
}
}
</style>
I am trying to build a responsive navigation menu for my website. However, it should also stick to the top when you scroll further down the page. This works fine on the normal 'desktop-size' menu, but when I expand the list items in the responsive navigation menu, the whole menu re-positions itself back to the top.
let navbar = document.querySelector("nav");
let offset = navbar.offsetTop;
// Makes the menu sticky
function stick() {
if (window.pageYOffset >= offset) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
// Makes the menu responsive
function collapse() {
if (navbar.className === "responsive") {
navbar.classList.remove("responsive");
} else {
navbar.classList.add("responsive")
}
}
My JSFiddle: https://jsfiddle.net/MihkelPajunen/t37g6hsc/
Question: Is there a way to make the responsive navigation menu sticky, so that the menu is accessible at the top of the page, even when you scroll further down the page?
Remove the following rule:
nav.responsive {
position: relative;
}
As this is overriding the position: fixed rule.
Also, change the collapse function like so:
if (navbar.className.indexOf("responsive") >=0 ) {
As the class name will actually be something like "responsive sticky"
Here's a fork of that fiddle
Try To use this one instead of yours
<!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, 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;
}
}
</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>
I am trying to make my navigation bar responsive but I am having issues making an image (our logo) appear and disappear when desired.
First of all the default is that the navigation bar has our standard logo displayed and the alternative one hidden:
Then when moving onto a smaller screen I am using a media query to change the color of the navigation bar, hide one logo, show another logo and add a hamburger menu.
Since I found that clicking the hamburger menu, and viewing the links in block display, the alternative logo sat in the way of the first link. So I used a function to hide it (triggered upon clicking on the hamburger menu)
So far so good, clicking on the hamburger menu toggles the logo appearing and disappearing. However, if you collapse the menu without going to another page the function toggles the logo on again - which is fine until you resize the page and make it larger. Then the logo just sits in the way and isn't made to disappear by the media query.
I have tried using !important tags but honestly at a bit of a loss of how to do this final step. Any feedback would be much appreciated!
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../Style/Basic Styling.css"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="page">
<div id="page_container">
<!--Nav Bar Start -->
<div class="topnav" id="myTopnav">
<img id="CElogo" src="https://imgur.com/gallery/Zmuzg62" alt="CE logo" title="CE logo" >
<img id="CElogoNoTextID" class="CElogoNoText" src="https://i.imgur.com/Kr3ACDH.jpg" alt="CE logo No Text" title="CE logo No Text" >
Blog
Pricing
<a id="homeNav" class="homeNavClass" href="http://localhost:63342/untitled/Home Page/Climate Edge.html">Home</a>
☰
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
var y = document.getElementById("CElogoNoTextID");
if (y.style.display === "none" ) {
y.style.display = "block";
} else {
y.style.display = "none";
}
}
</script>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin:0;
}
#page {
margin:0;
background:none;
overflow:auto;
}
#page_container {
margin:0 0px;
}
#HeaderImage {
width: 100%;
line-height:1px;
z-index: 3;
}
.topnav {
overflow: hidden;
width: 100%;
margin-top: 0%;
z-index: 2;
position: absolute;
background: none;
}
#homeNav{
display:none; !important
}
.topnav a {
float: right;
color: black;
padding: 25px 16px;
text-decoration: none;
z-index: 1;
font-family: Lato;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav img {
width: 130px;
margin-left: 5px;
margin-top: 7px;
position:absolute;
overflow: auto;
}
#CElogoNoTextID {
display: none;
}
.topnav .icon {
display: none;
}
#DataToAction {
width: 30vw;
margin-left: 35vw;
margin-right: 35vw;
margin-top: 5vw;
position:absolute;
}
#media screen and (min-width: 601px)and (max-width: 1000px) {
.topnav a {
font-size: 16px;
}
#DataToAction{
display:none;
}
.topnav img {
display:none;
}
#CElogoNoTextID{
display: none; !important;
}
}
#media screen and (max-width: 600px) {
#HeaderImage {
margin-top: 80px;
}
#CElogoNoTextID{
display:block;
float:left;
margin-top: 0px;
width: 90px;
}
.topnav {
background: #29ABE2;
}
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
#homeNav{
float: right;
display: block;
color: white;
}
.topnav img{
display: none;
}
#DataToAction{
display:none;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
color:black;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive a.homeNavClass {
display: block;
text-align: left; !important;
}
}
Please see the jsfiddle here