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
Related
When my navigation bar is displayed on a small screen (mobile example), it doesn't appear as expected, I cannot fix the problem
I tried to change my css several times but it gets worse
Can u help me please :)
navbar responsive test
#media( max-width: 1200px){
header{
/*margin: 20px;*/
}
}
#media( max-width: 768px){
.menu-toggle{
display: block;
width: 40px;
height: 40px;
margin: 10px;
float: right;
cursor: pointer;
text-align: center;
font-size: 30px;
color: #069370;
}
.menu-toggle:before{
content: '\f0c9';
font-family: FontAwesome;
line-height: 40px;
}
.menu-toggle.active:before{
content: '\f00d';
font-family: FontAwesome;
line-height: 40px;
}
nav {
display: none;
}
nav.active {
display: block;
width: 100%;
}
nav.active ul {
display: block;
}
nav.active ul li a {
margin: 0;
}
}
The elements in your <header> element a floated and so the menu doesn't know where the element stops and this causes CSS to not know how to compute the height of that element
A quick fix to that would be to put overflow: hidden:
<header style="overflow: auto"> ... </header>
You can learn a lot about this from this elaborated StackOverflow answer link to answer
i have add overflow: auto on my header it s works but i can t fixe the menu panel too when i click on the button menu toggle , the text go right and i can t see him.
i think i have a problem with my "float: right" in the class .menu-toggle ;
the text isn't show in the mobile display, he go to the right and he dont take the good place...
i want to place the menu panel one below the other
home
about
services
navbar responsive with overflow : auto
#media( max-width: 1200px){
header{
/*margin: 20px;*/
overflow: auto;
}
}
#media( max-width: 768px){
.menu-toggle{
display: block;
width: 40px;
height: 40px;
margin: 10px;
float: right;
cursor: pointer;
text-align: center;
font-size: 30px;
color: #069370;
}
.menu-toggle:before{
content: '\f0c9';
font-family: FontAwesome;
line-height: 40px;
}
.menu-toggle.active:before{
content: '\f00d';
font-family: FontAwesome;
line-height: 40px;
}
nav {
display: none;
}
nav.active {
display: block;
width: 100%;
}
nav.active ul {
display: block;
}
nav.active ul li a {
margin: 0;
}
}
You just need to set a bigger width for your container.
To fix your issue:
#media( max-width: 768px){
.menu-toggle{
width: 400px;
}
}
Hi Can you please follow Below Html Structure :
<header>
Logo
<div class="menu-toggle"></div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="clearfix"></div>
</header>
I'm coding a responsive navbar, which turns into a burger menu below a certain width, however when I try to open the dropdown menu, it all jumps back up to the top of the page rather than remaining wherever I am within the page.
Sorry it's quite hard to describe, but do find all the code below and please let me know if you're able to see what the issue is.
Thank you all in advance:
$('#burger_menu').click(function() {
$('header ul').css('display', 'block');
$('header ul').mouseleave(function() {
$('header ul').css('display', 'none');
});
});
header {
width: 100%;
background: #62c2d2;
position: fixed;
top: 0;
z-index: 20;
}
header #logo {
width: 300px;
height: 40px;
margin: 15px;
background: url('../img/new-logo.png')center no-repeat;
background-size: cover;
float: left;
}
header nav {
padding: 10px 15px;
float: right;
}
header nav #burger_menu {
padding-right: 20px;
font-size: 40px;
display: none;
color: #fff;
}
header nav #burger_menu:visited {
color: #fff;
}
header nav #burger_menu:hover {
color: #eee;
}
header nav #burger_menu:active {
color: #fff;
}
header nav ul {
display: block;
}
header nav li {
padding: 10px;
display: inline-block;
float: left;
}
header nav a {
width: fit-content;
font-size: 18px;
color: #fff;
text-decoration: none;
position: relative;
}
#media screen and (max-width: 1023px) {
/* NAV */
header nav #burger_menu {
display: inline-block;
}
header nav ul,
nav:active ul {
display: none;
position: absolute;
padding: 20px 40px;
background: #62c2d2;
right: 0;
top: 80px;
width: 30%;
}
header nav li {
width: 100%;
text-align: center;
padding: 15px;
margin: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
<!-- left -->
<!-- right -->
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>
<span class="active">home</span>
</li>
<li>
<span>about</span>
</li>
<li>
<span>careers</span>
</li>
<li>
<span>contact</span>
</li>
</ul>
</nav>
</header>
I'm designing a one-page scrolling website. When I click on a page link from the nav bar at screen widths less than 780px (when the hamburger icon appears), the hamburger icon disappears. I can't get it back unless I refresh the page. The nav bar also disappears at full screen width after clicking on a page link once. I would like to keep the hamburger icon and the top navigation in view at all times. The javascript I'm using to collapse the full-screen menu that shows up at 780px is causing this problem, but I need it, or the menu will not disappear when a link is clicked. Thank you to anyone who can help!
$(document).ready(function() {
$('a').click(function() {
$('#menu').slideToggle();
});
});
#media screen and (max-width: 780px) {
nav {
width: 100%;
margin: 0;
padding: 0;
position: relative;
left: 0;
display: block;
opacity: 1.0 !important;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
nav ul {
width: 100%;
margin: 0 auto;
padding: 0;
display: none;
float: none;
}
nav ul li {
font-size: 1.3em;
font-weight: normal;
line-height: 40px;
width: 100% !important;
margin: 0;
padding: 0;
}
nav ul li:nth-of-type(1) { margin-top: 20%; }
nav ul li:hover { background: #565758; }
nav ul li a {
color: white !important;
font-family: "Lato", sans-serif;
border-bottom: none !important;
display: inline-block;
}
nav ul li a.active-link {
color: white !important;
font-size: 1.3em;
}
nav ul li a:hover {
color: white;
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
margin: 0 !important;
padding: 1em !important;
text-align: right;
display: block;
float: right;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}
<header>
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>
You need to add the toggle to the checkbox as well. It is an jQuery function, that uses specific animations and styles.
$('#show-menu').click(function() {
$('#menu').slideToggle();
});
EDIT
I added a working example. I did not used the toggle here, for a better design. Now the menu also toggels with the click on the checkbox :-)
$(document).ready(function() {
$('a').click(function() {
$('#menu').slideToggle();
});
$('#show-menu').change(function() {
if(this.checked)
$('#menu').slideDown();
else
$('#menu').slideUp();
});
});
#media screen and (max-width: 780px) {
nav {
width: 100%;
margin: 0;
padding: 0;
position: relative;
left: 0;
display: block;
opacity: 1.0 !important;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
nav ul {
width: 100%;
margin: 0 auto;
padding: 0;
display: none;
float: none;
}
nav ul li {
font-size: 1.3em;
font-weight: normal;
line-height: 40px;
width: 100% !important;
margin: 0;
padding: 0;
}
nav ul li:nth-of-type(1) { margin-top: 20%; }
nav ul li:hover { background: #565758; }
nav ul li a {
color: white !important;
font-family: "Lato", sans-serif;
border-bottom: none !important;
display: inline-block;
}
nav ul li a.active-link {
color: white !important;
font-size: 1.3em;
}
nav ul li a:hover {
color: white;
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
margin: 0 !important;
padding: 1em !important;
text-align: right;
display: block;
float: right;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div>
</header>
I'm a novice web developer with no real jquery knowledge, so please bear with me. I'm trying to make a simple mobile responsive dropdown menu (ideally I'd like a slide down, but baby steps first). For the most part, I figured it out. However, I assigned my "Unordered List" an ID selector and it doesn't seem to function anymore. What am I overlooking? Thanks in advance!
This is my code: JSFiddle
$(document).ready(function(){
$('#toggle-button').click(function(){
$('#menu').toggleClass('show');
});
});
.show {
display: block;
}
nav {
background: black;
width: 100%;
}
.menu-bar {
width: 100%;
background: black;
height: 50px;
}
#toggle-button {
position: absolute;
top: 15px;
right: 60px;
height: 35px;
width: 35px;
background: red;
cursor: pointer;
display: block;
}
#menu {
list-style: none;
width: 100%;
display: none;
margin: 0px;
padding: 0px;
}
#menu li {
height: 50px;
background: #535252;
}
#menu li a {
display: block;
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
text-decoration: none;
cursor: pointer;
}
#menu li:hover {
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-bar"></div>
<nav>
<ul id="menu">
<li>Profile</li>
<li>Profile</li>
<li>Profile</li>
</ul>
</nav>
<a id="toggle-button" href="#"></a>
Use:
#menu.show {
display: block;
}
after! you defined your defaults for #menu {
https://jsfiddle.net/nw2wf3uh/6/
or use the not-so-nice !important:
https://jsfiddle.net/nw2wf3uh/7/
.show {
display: block !important; /* if .show is placed before #menu styles in CSS */
}
You can also go the other way around, setting to your #menu a .hide by default:
<ul id="menu" class="hide">
CSS:
.hide {
display: none; /* but remove display:none; from #menu now! */
}
and toggle that .hide class:
$('#toggle-button').click(function(){
$('#menu').toggleClass('hide');
// or simply: $('#menu').toggle();
});
Here you'll not run into overriding styles cause of priority and you'll not have to use the !important fix (but you might have issues with JS-disabled users if that's of any concern (you should not care much but it always depends.)).
Recently I've been attempting to make my own responsive navigation and have managed to, but now i'm wanting to jump the next hurdle, which is to create the same navigation but without having two seperate link lists.
Now I've tried various methods to get this to work, including using javascript to add / remove classes when at a certain width, which worked to a certain extent, but only if i resized the browser for it to find out the browser width, which obviously has it's flaws when you can't resize the browser when on a mobile device.
The code i've currently got is -
HTML
<nav class="mainnav" role="navigation">
<div class="desktopnav" id="navigation">
<ul class="mainlinks">
<li role="menuitem">Home</li>
<li role="menuitem">About</li>
<li role="menuitem">My Work</li>
<li role="menuitem">Contact</li>
</ul>
</div>
<div class="mobilenav">
<button class="navtoggle">toggle</button>
<ul class="mainlinks">
<li role="menuitem">Home</li>
<li role="menuitem">About</li>
<li role="menuitem">My Work</li>
<li role="menuitem">Contact</li>
</ul>
</div>
</nav>
CSS
.mainnav {
width: 100%;
height: auto;
background: #64137B; }
/*Desktop nav*/
.desktopnav {
display: block; }
.desktopnav ul.mainlinks {
list-style-type: none;
margin: 0 auto;
padding: 0;
display: table;
min-height: 50px; }
.desktopnav ul.mainlinks li {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
border-right: 1px solid #A37EAE; }
.desktopnav ul.mainlinks li:first-child {
border-left: 1px solid #A37EAE; }
.desktopnav ul.mainlinks a {
color: white;
text-decoration: none; }
.mobilenav, .desktopnav {
min-height: 50px;
height: auto; }
/*Mobile Nav*/
.mobilenav {
text-align: center; }
.mobilenav, button.navtoggle {
display: none; }
.mobilenav ul.mainlinks {
display: none;
list-style: none;
padding-left: 0px; }
#media (max-width: 768px) {
.desktopnav {
display: none; }
.mobilenav {
display: block; }
button.navtoggle {
display: table-cell;
margin: 5px auto;
text-align: center;
border: 0;
text-indent: 200%;
overflow: hidden;
background: white url(../../images/navbutton.png) center no-repeat;
border: 1px solid #ddd;
border-radius: 5px;
background-size: 80%;
width: 40px;
height: 40px;
outline: none;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out; }
button.navtoggle:hover {
opacity: 0.7; }
ul.mainlinks {
background: #8421A0;
margin: 0px;
padding: 0px 0px; }
ul.mainlinks li {
padding: 15px 10px;
border-bottom: 1px solid #A37EAE; }
ul.mainlinks a {
color: white;
text-decoration: none; }
}
Has anyone got any ideas on what i might be able to do, to fix my problem?
Thanks
You need to use media queries, that way you can set position values entirely based on the size of the screen:
.nav {
/* some common properties here */
/* some positioning properties here */
/* these will be set for everything and may need over-riding */
}
#media (min-width: 800px) {
.nav {
/* some completely different positioning properties here */
/* remember, some may be over-rides */
}
}
Declaring the common properties in a class then over-riding as the screen gets wider is basic mobile first best practice - it enables you to handle tough layout issues with room to expand, rather than getting everything perfect large and finding it's hard to squeeze down. In some cases, you may need to use a declaration like this:
#media (min-width: 480px) and (max-width: 800px) {
/* properties */
}