i hope to use a navigation menu bar which extracted from another post in stack overflow. here is my code
CSS
<style>
header, nav {
background-color:#06C;font-family:'Open Sans';
}
header {
width:100%;display:flex;align-items:center;
height:80px;color:#FFF;justify-content:flex-start;
} /* we use flex display to position the hamburger icon on the side of the AndroiCSS h2 element */
#hamburger {
cursor:pointer;
} /* add the small hand cursor pointer to indicate this element is clickable; it triggers the jQuery on click */
header * {
margin:0 15px;
}
.fa-bars, header h2 {
font-size:28px!important;
}
header h2 {
font-weight:400!important;
}
nav {
display:flex;flex-direction:column;width:0;align-items:center;
transition:width 0.2s ease;
}
nav.open {
width:250px;
height:100%;
}
nav.close {
width:0;
}
nav * {
color:#FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px;
}
nav a {
text-decoration:none!important;
border-top:0.5px solid gray;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;height:55px;
}
nav a:hover {
background-color:rgba(0, 0, 0, 0.1);
} /* this changes the bg color on hover over the nav element */
</style>
HTML
<header>
<i id="hamburger" class="fa fa-bars"></i>
<h2>AndroidCSS</h2>
</header>
<nav>
<i class="fa fa-star"></i> <span>Terms and conditions</span> <!-- nav menu no need for <ul> or <li> tags here -->
<i class="fa fa-calculator"></i><span>Privacy Policy</span>
<i class="fa fa-envelope"></i><span>About Us</span>
<i class="fa fa-facebook"></i><span>Help</span>
</nav>
JAVA SCRIPT
<script>
$("#hamburger").click(function(){
$("nav").toggleClass('open', 'close');
});
$("a").click(function(){
$("nav").toggleClass('open', 'close');
});
</script>
I want to get align left menu items with left padding 10px.(tried lot of ways. but unsuccessful)
I want to put hamburger icon in right side of navigation bar.
I need to close opened menu on outside clicking using pure javaScript.(by clicking anywhere outside)
all must be responsive.
please help me to solve these three problems. it's highly appreciated.
This is the fiddle: https://jsfiddle.net/akslk/105phkog/10/
Remove the display: flex from the <a> tags;
Add a display: flex !important, flex-direction: column and
justify-content: flex-start to your <nav> tag;
Here's an example:
jsfiddle.net/mdyvzx09/2
Feedback: adding linebreaks in your CSS code can improve its readability :)
Related
So i want to make this responsive menu. On Desktop it looks like this:
And on Mobile it should look stacked overlapping everything under it but not pushing it down. So not like this:
(Before button pressed)
(After button pressed)
You can see that the Slideshow below is pushed down and the obvious misplacement of the menu on the button in general.
Plese help me to fix this, im a poor backend dev.
Here is my code:
function myFunction() {
var x = document.getElementById("menu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
.menu .icon {
display: none;
}
#media screen and (max-width: 965px) {
.menu a {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */
#media screen and (max-width: 965px) {
.menu.responsive {
background-color: white;
position: relative;
}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: left
}
}
<div class="mainheader">
<div class="logo">
<img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg">
</div>
<div id="menu" class="menu">
Unternehmen
Leistungen
Referenzen
Kontakt
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img class="bigicon" src="../bilder/menu.png">
</a>
</div>
</div>
So the anwer to fix the issue was to set the responsive menu class to absolute, also you have to use right: 0; so it stays in place.
After that i figured out that i could just move the menu links down since they are also absolute now in order to prevent them from overlapping the button.
Thanks for the effort of helping everyone ;)
function myFunction() {
var x = document.getElementById("menu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
.menu .icon {
display: none;
}
#media screen and (max-width: 965px) {
.menu a {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */
#media screen and (max-width: 965px) {
.menu.responsive {
background-color: white;
position: relative;
}
.menu.responsive a {
float: none;
display: block;
text-align: right
}
}
<img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg">
</div>
<div id="menu" class="menu">
<img class="bigicon" src="../bilder/menu.png">
<span>
Unternehmen
Leistungen
Referenzen
Kontakt
</span>
</div>
</div>
with out looking at whole page code here is what you need to do or something I would always check before going forward.
for css to work properly add this meta tag in head <meta name="viewport" content="minimal-ui, height=device-height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
secondly menu is something that should be stacked higher up on the interactive and display layer so it does not mess with other elements on the page. One way of doing this is to place the tag at the bottom of everything last on page (remember to css absolute positioning on the menu div) or zoom it up like +10000 should do.
please try not to add responsiveness after the fact like when user clicks this will create whole lot of problem going forward as computed vs initial values collide. Leave things to css as much as possible. It is good code from w3school follow its instructions as stated.
For the positioning issue calculate height of the image;
it is actually your icon that is being positioned every thing else is relative to where it should be. so move your icon as first item then every other anchor tag below it. this should solve your positioning issue.
Add z-index property to .menu.responsive class.
currently I am trying to create a navigation bar that switches itself to a hamburger menu if the screen size is too small (responsive / mobile).
https://jsfiddle.net/g7tfnry1/31/
$(document).ready(() => {
$("#btn").click(() => {
$("#items").toggle();
});
});
#navbar {
background: red;
}
#items {
display: flex;
}
#btn {
display: none;
}
#media(max-width: 300px) {
#items {
display: none;
}
#btn {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="btn">X</button>
<div id="items">
<div>
<a>
Link 1
</a>
</div>
<div>
<a>
Link 2
</a>
</div>
<div>
<a>
Link 3
</a>
</div>
</div>
</div>
So if you lower the screen size to mobile the css works fine. If you show the items by clicking the button the css works fine too. But after that if you want to get back to a big screen size the menu disappears completely because the items are still hidden or the items don't get aligned in a flex box next to each other.
My question is, do I have to create a resize event $(window).resize() or am I missing something in my css?
When using .toggle (show/hide) you override the CSS rules as it change the display type inline, which has a higher specificity than external rules, unless !important is used in the CSS.
Instead toggle a class .toggleClass, combined with an extra CSS rule #items.show
Updated fiddle
Stack snippet
$(document).ready(() => {
$("#btn").click(() => {
$("#items").toggleClass('show');
});
});
#navbar {
background: red;
}
#items {
display: flex;
}
#btn {
display: none;
}
/* temp. changed to 500 so it works better in the snippet/Chrome when resize */
#media(max-width: 500px) {
#items {
display: none;
}
#btn {
display: block;
}
}
#items.show {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="btn">X</button>
<div id="items">
<div>
<a>
Link 1
</a>
</div>
<div>
<a>
Link 2
</a>
</div>
<div>
<a>
Link 3
</a>
</div>
</div>
</div>
I have a mobile nav button that upon touching/clicking, should expand and reveal page links. Problem is when you first start the page the button is already expanded:
But should actually load page with elements hidden like so:
The X icon and Line-stack Icon are also reversed. How would I switch these icons around and also make sure the page loads with them closed? I tried switching the icons classes in the jQuery function to switch the x and line-stack but that hasn't worked.
I know there is a simple concept I am missing but I am quite new to jQuery and am having trouble here.
My HTML:
<nav>
<div class="row">
<img src="img/logoblack.png" alt="logo" class="logo img-fluid">
<img src="img/logoblack.png" alt="logo" class="logo-black">
<ul class="main-nav js--main-nav">
<li>About</li>
<li>Skill</li>
<li>Résumé</li>
<li>Contact</li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
My CSS:
.mobile-nav-icon {
float: right;
margin-top: 30px;
cursor: pointer; /* Used since no href tag specifying link type */
display: none;
}
My jQuery:
$('.js--nav-icon').click(function() {
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon i');
nav.slideToggle(200);
if (icon.hasClass('ion-navicon-round')) {
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
} else {
icon.addClass('ion-navicon-round');
icon.removeClass('ion-close-round');
}
});
Figured it out, needed to create a media query that would hide the .main-nav with display-none;. This way the tags were hidden on mobile devices but still shows in a navbar on a browser:
/* Small phones to small tablets from: 481px to 767px*/
#media only screen and (max-width: 767px) {
.main-nav {
float: left;
margin-top: 25px;
margin-left: 25px;
display: none;
}
}
I am trying to style a little bit my menu.
I am using bootstrap and font awesome css styles.
I think it will much better to show the problem on live page.
I need to achieve two goals
I need to put this chevron icon at the bottom with little margin (2-3px)
like this. So it should be at the bottom in any case with little margin.
The problem is that < li > items is not resized according to the content inside it. As you can see on this screenshot. It is sticked to the bottom border and if I add some margin I will get following result
I am using following styles
.item-icon-container {
margin: 2px 0 15px 0;
float: right;
display: block;
height: 100%;
}
.item-icon-container .expand-indicator {
display: block;
}
.item-icon-container .badge {
display: block;
}
Here is full HTML code http://pastebin.com/S26C9xSU
Please help to solve the problem.
I would be grateful for any help
To make sure that all elements inside LI affected it's height we can add last element into LI with style clear:both
Possible solutions:
1) Use CSS with :after selector
.list-group-item a:after{
content:"";
font-size: 1px;
display:block;
clear:both;
}
2) Extra element. At the end of each li you can add
<div style="clear:both;"></div>
Something like:
<li id="cat-id-5" class="cat-parent-empty list-group-item">
<div class="item-icon-container">
<span class="badge">1</span>
<i class="fa expand-indicator fa-chevron-down"></i>
</div>
<a href="http://crosp.net/category/technology/" title="View all posts in Technology">
<i class="fa fa-tasks fa-fw" aria-hidden="true"></i>
Technology
</a>
<div style="clear:both;"></div>
</li>
CSS style looks better. Extra element has better compatibility.
Try adding padding to your expand-indicator element (I'm guessing, without seeing your HTML). https://jsfiddle.net/ve39a1qj/
.item-icon-container .expand-indicator {
display: block;
padding-bottom: 20px;
}
I'm having some trouble when designing a responsive layout as follows below:
If you browse to http://www.wickersleysixthform.net you can see this in action.
Basically I'm trying to create a responsive menu so in browsers of 768px and above you will see a normal horizontal navigation. Then for anything under 481px you will see the "three line" menu with a .slideToggle() effect on that once pressed drops down the menu.
I can sort of get this to work, but the .slideToggle() isn't pushing the rest of the content down which I need it to do. Also the three lines won't appear if I re-size my browser screen manually however if I resize then refresh the page it will do, but if I do that then the normal links in the larger screen size don't show. I hope that makes sense.
This is the jQuery I'm using for the toggle inside a jQuery(document).ready(function($) {});
/* getting viewport width */
var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport < 481) {
$(".top-nav").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$(".top-nav").slideToggle();
});
}
/* if is above or equal to 768px */
if (responsive_viewport >= 768) {
$(".top-nav").show();
}
Can anyone help? No doubt it's something simple but it's driving me insane. Possibly CSS based rather than the jQuery?
The CSS I'm using is as follows (in my base/mobile stylesheet).
.header {
background-color:#blue;
padding-top:10px;
height:50px;
}
#menu {
display:block;
font-size:1.75em;
position: absolute;
right: 10px;
top: 2px;
}
.top-nav {
display:none;
}
.top-nav.open {
display:block;
background:#blue;
}
In my 768 and up stylesheet:
.header {
padding-top:0;
height:70px;
position:fixed;
width:100%;
z-index:10;
}
#menu {
display:none;
}
.top-nav {
display:block;
}
My HTML structure:
<header class="header" role="banner">
<div id="inner-header" class="wrap clearfix">
<a rel="nofollow" href="http://www.wickersleysixthform.net">
<img id="logo" width="50px" height="36px" src="http://www.wickersleysixthform.net/wp-content/themes/sixthform/library/images/white.png">
</a>
<nav role="navigation">
<div id="menu">☰</div>
<ul id="menu-main-menu" class="nav top-nav clearfix">
<li>About</li>
<li>
Current Students
<ul class="sub-menu"></ul>
</li>
<li>Courses</li>
<li>Student Life</li>
<li>Prospectus</li>
<li>Apply</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
The problem is that your header element has a fixed height of 50px. So when the menu expands the header stays the same height.
Removing the height or replacing it with min-height solves your problem