How to make a collapsible navbar if the screen is smaller ?
My code looks like this:
<header class="header">
<a href="#" class="logo">
<img src="images/logo.png" alt="">
</a>
<nav class="navbar">
<div class="cart">
Strona główna
Sklep
<a href="cart.html">
<ion-icon name="basket"></ion-icon>Koszyk<span>0 </span>
</a>
</div>
</nav>
</header>
First, you will need to add the components that implement a disclosure pattern, i.e. the burger button.
And don’t forget to provide a helpful alt Text for your logo, usually the name visible inside the Logo
<header class="header">
<a href="#" class="logo">
<img src="images/logo.png" alt="ACME">
</a>
<nav class="navbar">
<button class="navtoggle" aria-expanded="false" aria-label="Menu"><ion-icon name="menu-outline"></ion-icon></button>
<div class="cart" class="cart--hidden">
…
If you don’t want to use a <button>, you’ll need to apply role=button and make sure that the element is focusable by means of keyboard as well, maybe by tabindex=0.
Then, via CSS Media Queries you can control on which viewport sizes you want to allow users to toggle the menu open and closed.
If you apply Mobile First coding, your basic CSS will be the smallest version, and then min-width queries add layouts for bigger screens. 900px is just an example, you might want to determine that breakpoint depending on the size of your menu.
.cart--hidden { display: none; }
#media screen and (min-width: 900px) {
.navtoggle { display: none; }
.cart--hidden { display: block };
}
Finally, you’ll need to bind to the click event to change the toggle-status in JavaScript.
const toggle = document.querySelector('.navtoggle');
const cart = document.querySelector('.cart');
toggle.addEventListener('click', () => {
if (toggle.ariaExpanded === "true") {
toggle.ariaExpanded = "false";
cart.classList.add('cart--hidden');
} else {
toggle.ariaExpanded = "true";
cart.classList.remove('cart--hidden');
}
});
.cart--hidden { display: none; }
#media screen and (min-width: 900px) {
.navtoggle { display: none; }
.cart--hidden { display: block; }
}
<header class="header">
<a href="#" class="logo">
<img src="images/logo.png" alt="ACME">
</a>
<nav class="navbar">
<button class="navtoggle" aria-expanded="false">Menu</button>
<div class="cart cart--hidden">
Strona główna
Sklep
<a href="cart.html">
<ion-icon name="basket"></ion-icon>Koszyk<span>0 </span>
</a>
</div>
</nav>
Beware again, that if you don’t use a <button> for the toggle, you will need to bind keydown handlers as well. Browsers do that by default for certain interactive elements.
You not really clear as to what you want to do. So it depends on what you are trying to accomplish. Maybe this will help get put you in the right direction:
CSS Files
//Media Query to run block of CSS code when viewport is at set width
//Mobile
#media screen and (max-width: 768px) {
// Makes it disappear
nav {
display: none;
}
.some-class {
render hamburger menu maybe...
display: block;
}
//Tablet
#media(max-width: 1024px) and (min-width: 768px) {
nav {
display: block;
}
.some-class {
display: hidden;
}
}
I would recommend looking into some documentation. I have found W3 schools is a good place to look for easy reference.
W3 Schools Media Query
Related
the end goal is for my navigation to look just like this:
<div class="l-region l-region--navigation">
<div data-mediasize="959" class="responsive-menus responsive-menus-0-0 absolute"><span class="toggler">☰ Menu</span><div id="block-superfish-1" class="block block--superfish block--superfish-1 responsive-menus-simple">
<div class="block__content">
<ul id="superfish-1" class="menu sf-menu sf-main-menu sf-horizontal sf-style-none sf-total-items-8 sf-parent-items-6 sf-single-items-2 superfish-processed sf-js-enabled sf-shadow"><li id="menu-2237-1" class="first odd sf-item-1 sf-depth-1 sf-no-children">Events</li>
link to code: https://jsfiddle.net/4b17u2fs/1/
You have to use different #media queries for this.
With those media queries, you will be able to make your burger button visible or not. Then it's some javascript for the event when you click on the button.
You can do something like this :
#media screen and (max-width: 1100px) {
.burger-button {
display: inline-block;
}
}
.burger-button {
display: none;
}
This will only make your .burger-button visible on screens smaller than 1100px.
You just have to adjust things but this is the way of doing.
I am relative new to web development so while developing a project site responsive design I ran into a problem that when ever hamburger menu is pressed even though lines for expending exists in external css file but it is not detected but new inine styles are created by javascript and then it works as expected.
HTML:
<nav class="mobileNav" id="mobileMenu">
<a class="mol-6" onclick="show();" href="index.html">
<figure>
<img class="icon" src="images/nav/home.png" alt="">
<figcaption>Home</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="astronomy.html">
<figure>
<img class="icon" src="images/nav/astro.png" alt="">
<figcaption>Astronomy</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="telescope.html">
<figure>
<img class="icon" src="images/nav/tele.png" alt="">
<figcaption>Telescopes</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="about.html">
<figure>
<img class="icon" src="images/nav/about.png" alt="">
<figcaption>About</figcaption>
</figure>
</a>
</nav>
CSS:
#mobileMenu {
font-family: light, sans-serif;
max-height: 0px;
z-index: 99;
transform: translateY(-100%);
overflow: hidden;
padding: 0px;
transition: transform 0.5s;
}
Javascript:
function show() {
if (document.getElementById("mobileMenu").style.maxHeight == "0px") {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "100%";
document.getElementById("mobileMenu").style.position = "fixed";
document.getElementById("mobileMenu").style.padding = "1%";
}, 1)
document.getElementById("mobileMenu").style.transform = "translateY(0px)";
} else {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "0px";
document.getElementById("mobileMenu").style.padding = "0px";
document.getElementById("mobileMenu").style.position = "relative";
}, 500)
document.getElementById("mobileMenu").style.transform = "translateY(-100%)";
}}
Working Example:
Astromuneeb (Require Portrait Orientation)
Any help will be appreciated.
There are better approaches of what you are trying to accomplish. For instance, you could use css classes for styling and use javascript only for switching classes.
I agree with Eugene, but .mobileNav class seems to be overriding your portrait media query.
I added important to your .mobileNav portrait media query but even that won't override it, guess its something to do with hierarchy. It's weird you get display:none; as an inline style on your nav when opening and closing currently, that will not help.
Definitely just set a .open class as Eugene suggested. And use css transforms to do the animation. And just simply add/remove class on the nav.
And when using media queries in css for mobile etc prob best to use screen size etc, and start mobile first...
.mobileNav { display: block; }
#media (min-width: 992px) {
.mobileNav { display: none; }
}
I am using bootstrap 3.3.7 and I want to change the text alignment to Left when col-sm-6 is reached. If this level is not reached yet then the text alignment is right. How can I do that?
Below is my div:
<div class="col-sm-6 text-right" style="padding-bottom:10px; padding-top:10px" >
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
I have tried to add this in the script css in the header but didn't work:
<style type="text/css">
#media (max-width: 767px) {
footer .text-right { text-align:left }
}
</style>
Any suggestions?
Another question please: is there anyway to detect in javascript or jquery if col level was reached? I am asking this because sometimes we need to hide images or add somthing in some levels ...
For example: hide image x when col-sm-6 is reached. Is it possible?
Assuming you have the correct bootstrap HTML then this should work
#media (max-width:767px) {
.container .text-right {
text-align: left
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6 text-right">
<a class="BAN_ForgotPass" href="#">Forgot the password ?</a>
</div>
</div>
</div>
To answer your second question, about hiding elements you can use utility classes in this case hidden-sm and hidden-xs
try this below code
#media (max-width: 767px) {
.text-right { text-align:left; }
}
Try this into your page with inline CSS and if works fine make external CSS
.col-sm-6
{
text-align:left;
}
if this works make a Separate CSS for each changes you want
like for image hide add below line in above code
.col-sm-6
{
text-align:left;
diaplay : block;
}
I am using twitter bootstrap for a site and basically I have a order list within a div element. When the screen get resized to 768px, I want parent's div width, equally distributed among all child list.
Do I need use media queries and JavaScript? Can anyone help me getting started with this concept please? The code may look like followings--
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-7 col-lg-9 pull-right process-tab">
<ol class="investment-pagination c-white pull-right process-tab-bar">
<li data-tab-target="goalName" class="active">1</li>
<li data-tab-target="amountTerm">2</li>
<li data-tab-target="riskLevel">3</li>
<li data-tab-target="investment">4</li>
<li data-tab-target="accountType">5</li>
<li data-tab-target="fund">6</li>
</ol>
</div>
</div>
EDIT: bootply.com/ibnLAYxmbB
Your parent is not col-xs-12 it is col-xs-6. So, first fix that.
Add a media query for max-width: 768px
Make your ol as display: table
Make your li as display:table-cell and remove float and width
In effect, your CSS would look like this:
#media screen and (max-width: 768px) {
.investment-pagination { display: table; width: 100%; }
.investment-pagination li { display: table-cell; width: auto; float: none; }
}
Demo: http://bootply.com/CRMNgpsjMV
I have a question..I need to add an image when a push on the print button...For example of the top of the page I want to insert an image:
Print button:
<li>
<a id="myLink" href="#" onclick="window.print();return false;">Print</a>
</li>
The print css:
#social-bar,#footer-copyright,#modal-reported,#modal-voted,#block- user-container,#thevideoplayer
{
display:none;
}
Now,how I can to add the logo of company on the top?Help please
Add image in page. hide for screen and show for print.
#media print {
.printlogo{ // add printlogo as class for logo image
display: block;
}
}
#media screen{
.printlogo{
display: none;
}
}
In your print.css, make sure the logo container has display: block or is otherwise viewable.