I have a responsive navbar with a dropdown. Works well in PCs (the dropdown only pops up on hover of the cursor) but when I try it with smartphones (the navbar is adjusted) if I activate the dropdown any link in it will reload the page properly but the dropdown is still there. I want to solve the issue without jQuery if possible.
I'm working with django, that's why I use {{ }}
<!-- navbar.html -->
{% load static %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/navbar.css' %}">
<div class="topnav" id="myTopnav">
<a class="active" href="{% url 'inicio' %}">Inicio</a>
<div class="dropdown">
<button class="dropbtn">Obras ▼
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Some text
Some text
Some text
</div>
</div>
☰
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
I'll only include here the style for when the screen has changed, for simplicity:
/* navbar.css
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
padding-top: 14px;
padding-bottom: 15px;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
overflow: visible;
}
.topnav.responsive a.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: absolute;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
padding-bottom: 20px;
}
I got the Idea from the w3schools example and have done some major modifications
Related
I have a problem with the searchbar not hiding when reducing the size of the window. Maybe there's a better way to solve the problem but hiding the searchbar, however, this is my first webpage project... sorry for the many mistakes!
My intention is to hide the searchbar (or maybe relocate it) so that the new "hamburger" button takes place.
Here you have a snippet of the navbar code:
/* 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";
}
}
/* Logo resize */
.logo-container {
max-width: 0px;
max-height: 0px;
margin-bottom: -3px;
left: 0;
position: absolute;
}
.logo {
width: 180px;
height: 48.5px;
object-fit: cover;
object-position: 50% 42%;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
margin-top: 130px;
overflow: hidden;
margin-right: -10px;
margin-left: -10px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
position: relative;
left: 42%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: rgb(228, 228, 228);
color: rgb(68, 66, 70);
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #616161;
color: rgb(228, 228, 228);
}
/* Style the search box inside the navigation bar */
.topnav input[type=text] {
float: right;
position: relative;
right: 40px;
padding: 6px 10px;
border: none;
margin-top: 10px;
margin-right: 16px;
font-size: 17px;
border-radius: 10px;
}
.topnav .search-container button {
float: right;
position: absolute;
right: 15px;
padding: 6px 10px;
margin-top: 10px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
border-radius: 50%;
}
.topnav .search-container button:hover {
background: #ccc;
border-radius: 50%;
}
/* 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;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
<!-- The Navbar -->
<div class="topnav" id="myTopnav">
<!-- The logo -->
<div class="logo-container">
<img class= "logo" src="https://img.freepik.com/vector-gratis/logo-lorem-ipsum-eslogan-aqui-plantilla-arte-diseno_647943-2.jpg?w=2000"
alt="logo">
</div>
<!-- The buttons -->
HOME
NEWS
HISTORY
GUIDE
<!-- The searchbar -->
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<!-- Responsiveness to small window with a button -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
Sorry again for my mistakes and terrible style... I guess we all start somewhere! hahaha
Thanks in advance!
You could just use a media query(as you already have) and hide the whole div when below a certain viewport
ex:
#media screen and (max-width: 600px) {
.search-container {
display: none;
}
}
i had a similar problem, i found out that when using bootstrap and MUI together , it messes many things .. so i would recommend to uninstall one of the two ..
I have a navbar, with a menu icon when the screen width is small. I did the animation, when I click on the menu icon, it rolls down nice and smoothly by increasing its navbars max height, but I can't work out, the do the animation backwards(when you click on the menu icon again).
I tried adding: transition: max-height 1s ease-out; to the .topnav{} but it doesn't work.
function responsiveNavbar() {
var x = document.getElementById("responsiveNavBar");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
max-height: 400px;
transition: max-height 1s ease-in;
}
*other*
}
#media screen and (max-width: 600px) {
.topnav {
max-height: 30px;
}
*other*
}
<div class="topnav" id="responsiveNavBar">
<a>MODELS</a>
<a>MOTORSPORT</a>
<a>ABOUT</a>
<div onclick="responsiveNavbar()">*working menu icon*</div>
</div>
Have a look at this code
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
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: #04AA6D;
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">
</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>
</body>
</html>
Working code source: https://codepen.io/aakash1282/pen/GRWVMwy
I am trying to add a sticky responsive navbar in a body with 100% height but whenever I try to check in in mobile screen size the navbar gets marginalized towards the right side.
Also, when I tried the same code in the page containing Bootstrap in it, the padding and margin get imbalanced in the NavBar (Perhaps Bootstrap uses HTML5 ).
Here's my CSS and HTML code. The first one is CSS and the last one is HTML with it's Javascript.
/* Navbar css */
.MainBody {
padding-top: 0px;
text-align: center;
background: linear-gradient(rgb(240, 251, 255), rgb(168, 203, 255));
background-attachment: fixed;
height: 1000px;
padding: 0px;
}
.topnav {
overflow: hidden;
background-color: #020f3b;
position: fixed;
/* Safari */
width: 100%;
top: 0;
z-index: 1;
}
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
font-weight: bold;
padding: 11px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #a3dcff;
color: black;
}
.topnav a.active {
background-color: #0099ff;
color: white;
}
.topnav .icon {
display: none;
}
#media only screen and (max-width: 909px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
background: rgb(0, 73, 146);
float: right;
display: block;
}
}
#media only screen and (max-width: 909px) {
.topnav .responsive {
position: fixed;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Navbar Css <:: */
<body class="MainBody">
<div class="topnav" id="myTopnav">
AEC Tool
<a href="https://webmatrices.com/sponsor-adsense-eligibility-checker/" target='_blank'>Sponsor or Buy AEC</a>
<a href="https://webmatrices.com/" target='_blank'>Webmatrices</a>
<a href="https://blog.webmatrices.com/" target='_blank'>Our Blog</a>
<a href="https://facebook.com/webmatrices" target='_blank'>Facebook Page</a>
<a href="https://facebook.com/iambishwas" target='_blank'>Creator's Facebook</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<!-- Navbar script ::> -->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- Navbar script <:: -->
<!-- Navbar Bar | nv <:: -->
</div>
</body>
This is happening due to comflict of HTML and HTML5(Bootstrap). I got the error bro. I recommend you to use <!DOCTYPE HTML> at the top of your html file, this will 100% solve your issue.
The menu gets set to display: none when the screen is below 910px
Remove this CSS if you don't want the menu to go away on mobile:
#media only screen and (max-width: 909px)
.topnav a:not(:first-child) {
display: none;
}
I have my NavBar setup on my main template. I am now going to create my first HTML page that I have setup as a link on my NavBar. It is going to be a completely fresh HTML page with nothing on it besides the inherited styling options. All I want is for this new page to include the NavBar I have already tailored to my needs. What is the quickest and easiest way to do this, so that I can quickly do it on future new HTML pages as well? I am not familiar with PHP currently, so if the answer involves that please try to elaborate a little on the explanation.
I've trued using a basic include on a blank page but it didn't work. So far the only code I've listed below is solely for the setup of my NavBar... Am I supposed to transform the below code into a PHP file in order to do so?
I should include that I am currently hosting using GoDaddy.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
$('#myTopnav a').on('click', function(){
$('#myTopnav a').toggleClass(' responsive');
});
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.topnav a {
display: inline-flex;
color: #fff;
text-align: justify;
text-decoration: none;
font-size: 15px;
font-weight: lighter;
padding: 0;
margin: 5px 60px 5px 60px;
list-style-type: none;
transition : 0.3s;
}
.topnav a:hover {
color: #4286f4;
}
.active, .active:focus {
background-color: #333;
color: #4286f4;
}
.topnav .icon {
display: none;
}
.topnav a:active, .topnav a:visited {
outline: 0 !important;
}
#media screen and (max-width: 800px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: left;
display: flex;
position: absolute;
left: 0;
top: 8px;
line-height: 15px;
outline: 0;
}
.topnav{
flex-direction: column;
transition: height 2s;
}
}
#media screen and (max-width: 800px) {
.topnav.responsive {position: static;}
.topnav.responsive .icon {
position: absolute;
left: 0;
top: 8px;
line-height: 15px;
outline: 0;
}
.topnav.responsive a {
float: left;
display: inline;
text-align: center;
line-height: 50px;
}
}
<!DOCTYPE html>
<!-- Begin HTML-->
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Begin head-->
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<img src="Images/PlaceholderLogo.png"width="30" height="30">
Home
Shop
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
</html>
I've created a responsive navigation bar. I have two problems. 1) When I shrink the screen on my test pages, all of the links don't hide. 2) When I insert the code onto Drupal, it puts the links that are nested in on a different baseline. It doesn't do that on the test page. I can't figure out a way to create the responsive bar without the button...probably because I'm a beginner.
Here are screenshots for both of the issuesenter image description here enter image description here and the 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:Helvetica}
/* Add a background color to the top navigation */
.topnav {
overflow: hidden;
background-color: #486D87;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #555;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #BE6A14;
color: white;
}
/* Add a background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #BE6A14;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* 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), .dropdown .dropbtn {
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;
}
.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
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
Store Info
History
Consignment
We Buy Used Books
</div>
</div>
Events
Blog
<div class="dropdown">
<button class="dropbtn">Signed Firsts</button>
<div class="dropdown-content">
Signed Fiction
Signed Nonfiction
Signed Suspense
</div>
</div>
Staff Picks
<div class="dropdown">
<button class="dropbtn">Square Books, Jr.</button>
<div class="dropdown-content">
Store Info
History
Storytime
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Gifts</button>
<div class="dropdown-content">
<a href="/square-books-gifts">
Gift Cards
</div>
</div>
Dear Reader
☰
</div>
<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>
</body>
</html>
Maybe this will solve your use case:
https://jsfiddle.net/5tof6ry0/4/
Change in css:
.topnav {
overflow: hidden;
background-color: #486D87;
display: flex;
justify-content: space-between;
}
Your code seems fine you just need to hide the button element with your media query.
Insert this into your css.
#media screen and (max-width: 600px) {
/*Hide button elements*/
.topnav button,
.topnav a:not(:first-child)
{display: none;}