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 ..
Related
The sidebar looks like the below snippet. What should i add to this code, like a wrapper to make it responsive in mobile screen?
.sidebar{
position: fixed;
left: 0px;
width: 314px;
height: 100vh;
background-color: #002438;
box-shadow: hsl(0, 0%, 75%) 7px 2px 15px;
}
.sidebar li{
margin-top: 45px;
font-size: 24px;
color: white;
text-align: center;
text-decoration: none;
}
.sidebar a{
color: white;
text-decoration: none;
}
.sidebar li :hover{
color: #00fff2;
}
.sidelist{
display: flex;
flex-direction: column;
padding-top: 20px;
margin-top: 40px;
text-align: center;
}
.active a{
width: 230px !important;
display: block;
margin: 10px auto;
font-weight: bold;
padding: 5px 10px;
border-radius: 50px;
background: #fff;
}
<div class="sidebar">
<ul class="sidelist">
<li>DASHBOARD</li>
<li class="active">CUSTOMER</li>
<li>LEADS</li>
<li>REPORTS</li>
<li>SMS</li>
<li>PROFILE</li>
</ul>
</div>
This is my sidebar. How do i turn it into a hamburger icon in mobile screens, which when clicked or dragged, moved from left to right side with all the sidebar.
What I might do is use a media query. If you want this to just be an icon button with the little hamburger icon, make the icon button above or below where you made this sidebar. In your css that you have there, give it another class maybe something like this:
.menuIcon {
display: 'none';
/* your other styles here */
}
Then the media query (you can make more than one) do something like this:
#media only screen and (max-width: 1000px) {
.menuIcon {
/* styles */
}
.sidebar {
display: 'none';
/* styles */
}
}
Of course change the media query to match what size screen you want to adjust for, and style how you want.
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;
}
My goal is for my hamburger menu to close when an item is clicked inside of it. As of right now, the menu only uses html and css.
The difference between this nav bar and others is that mine is created from a input checkbox html element, what i need is for my checkbox to uncheck when a link is clicked inside of the hamburger. This should close the entire menu just like it would if i clicked on the hamburger. Also, could you explain what and why the javascript does what it does, i don't have much experience with javascript, thanks. :)
I also made the checkbox visible just so that we can have a better understanding of whats going on.
My CSS:
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle:checked + .menu {
display: block;
}
}
My HTML:
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</div>
Javscript may not actually be required, depending on your needs.
If you give the div containing your nav links an ID you can target this with an a tag setting the href to the ID. Then you can use the :target selector to change the visibility of our navigation div.
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.toggle {
text-decoration: none;
color: #33334d;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
.toggle,
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
.toggle,
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#menu:target,
#toggle:checked+.menu {
display: block;
}
}
<div class="nav">
<a class="toggle" href="#menu">☰</a>
<div class="menu" id="menu">
example
example
example
example
example
example
example
</div>
</div>
Wow, interesting. It's a pretty weird practise, what you have, but it could work. You can make menu show/hide by input checked. Very interesting. I have never think of like that.
But also you will need a piece of JS code.
By CSS you can handle some basic selector like :hover, :focus, :active etc. In our your case you also make some interesting click event. But checkbox is not for that purpose.
Click and other event are handled by JS (more https://www.w3schools.com/js/js_events.asp).
So in our case, we select all links:
var links = document.querySelectorAll('.menu a');
then we have to add click event to every link, which will set our input to checked="false" = close menu.
This JS code will only work, when selected links are rendered, so you need to put this piece of code to the end of your html file before </body> or use window.onload...
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
/* navigation menu */
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: right;
z-index: 10000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaeb;
}
.menu {
margin: 0 30px 0 0;
}
/* link items */
.menu a {
clear: right;
line-height: 70px;
text-decoration: none;
margin: 0 10px;
text-align: center;
color: #33334d;
background-color: #ffffff;
}
.menu a:hover {
background-color: #c2c2d6;
}
/* hamburger properties */
label {
float: right;
display: none;
width: 26px;
line-height: 70px;
margin: 0 40px 0 0;
font-size: 36px;
}
/* checkbox */
#toggle {
}
#media only screen and (max-width: 1075px) {
/* hamburger properties */
label {
display: block;
cursor: pointer;
}
/* nav menu properties */
.menu {
width: 100%;
display: none;
text-align: center;
}
/* link items */
.menu a {
display: block;
margin: 0px;
border-bottom: 1px solid #eaeaeb;
}
/* makes links show when checkbox is checked */
#toggle {
display: none;
}
#toggle:checked + .menu {
display: block;
}
}
<label class="nav" for="toggle">
<div class="icon">☰</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
example
example
example
example
example
example
example
</div>
</label>
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;}
Hello I am currently learning responsive design and I am trying to make a responsive navigation bar which turns in to a menu when visited on a phone or mobile device! Everything works except not all the navigation items show on the mobile device and I am not sure why! This is the code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> RONNIE<b>GURR</b></li>
<section class="div_navbar_items">
<li class="navbar_items"> HOME </li>
<li class="navbar_items"> ABOUT US </li>
<li class="navbar_items"> GALLERY </li>
<li class="navbar_items"> SHOP </li>
<li class="navbar_items"> CONTACT </li>
</section>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Here is the CSS:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
margin-top: 50px;
font-family: 'Cabin', sans-serif;
font-size: 1.3em;
color: white;
font-weight: 700px;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
/*Start of mobile nav*/
#media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/*End of mobile nav*/
And here is the JS:
function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
codepen: https://codepen.io/anon/pen/JyEoWY
I think this will get you in the right direction, then you can decide upon what you'd like to do from here. You are setting your navbar to be 100vh, which is 100% height of the screen, so you need to make sure your padding and margin on your nav elements aren't so much. Try removing any margin and padding from these two styles, then adapt it on your own from here. If you don't want to change this stuff, refer to the second part of my answer, and just make the nav scrollable.
.navbar li a {
margin-top: 0px;
}
#media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
display: block;
padding: 0px;
font-size: 25px;
}
}
Also, if you look in .navbar styling (line 8 of your codepen) you have it set to overflow: hidden. You can update your .navbar.responsive class with overflow of scroll to get it to work.
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
overflow: scroll; // Set overflow to scroll
}
}
I guess this happenes because you make .navbar.responsive {
position:fixed;
And you just can't watch all content of block, because it's not allow to scroll. When i change this property to absolute, i looked all items of menu.
By the way, you write CSS property font-weight with px, font-weight: 700px, but it shouldn't be px, it's relative value: font-weight: 700