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>
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.
This is the code for my navbar (it has some more details, but it's just style so it doesn't matter I guess), and I cant find anything to make it fixed to the top of the page when I scroll down.
Also I'd like to do a smooth movement whenever I click any of the buttons, but
.container {
width: 80%;
margin: 0 auto;
}
header {
background: black;
}
header::after {
content: '';
display: table;
clear: both;
}
header h3 {
color: white;
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 18px;
position: relative;
}
<header>
<div class="container">
<h3>logo</h3>
<nav>
<ul>
<li>Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Base de Custo</li>
<li>FAQ</li>
<li>Contato</li>
</ul>
</nav>
</div>
</header>
To do this, you want to give it the property:
header {
position: fixed;
}
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
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.)).
I created a little responsive Navigation which works fine. I also want to add a link on the right side of my navigation for "Account".
My idea was to insert a div into a ul but I think that is not w3c conform.
<div class="navigation">
<ul>
<li>Welcome</li>
<li>Me</li>
<li>Service</li>
<li>Contact</li>
<div class="account">Account</div>
</ul>
Navigation
Here is a JS Fiddle Demo
Important is that i want the "account" on the right side, not side by side with the other navigation items. Under 700px screen size it should be under the contact li.
Should look like this: http://www.directupload.net/file/d/3718/xneivu5d_png.htm
Sorry for my bad english. I hope you can understand my problem and maybe you have a good idea to solve this.
Your .navigation li{ float: left;} CSS is pulling all <li> elements to the left.
Add the <li> tag for "Account" like so, with a new account class.
<li class="account">Account</li>
And add to your CSS:
.account{
float: right !important;
}
Updated JS Fiddle
Also, you're going to have to adjust your media query width for menu collapse since the account is now appearing on a second line in a small screen width just before the menu collapses.
EDIT:
As what I thought you wanted was incorrect, I've decided to update my answer.
http://jsfiddle.net/AlexCharlton/bb26gau3/3/
<body>
<div class="navigation">
<ul>
<li>Winterhalder</li>
<li>Me</li>
<li>Service</li>
<li>Contact</li>
<div class="account">
<ul>
<li>Account</li>
</ul>
</div>
</ul>
Navigation
</div>
</body>
CSS:
.account {
float:right;
}
get your .account div OUT of the UL, and then you can style it. Like this:
<div class="navigation">
<ul>
<li>Winterhalder
</li>
<li>Me
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
<div class="account">Account</div> Navigation
</div>
then in CSS add this:
`/* NAVIGATION */
.navigation {
width: 100%;
height: 50px;
background: #34495E;
position: fixed;
top: 0;
}
.navigation ul {
width: auto;
max-width:960px;
height: 50px;
margin: 0px auto;
padding: 0px;
float:left;
}
.account {
float:right;
margin:0px 20px
}
.navigation li {
display: inline;
float: left;
}
.navigation a, .account, .account a {
font: 400 14px Open Sans;
color: #FFF;
width: 140px;
line-height: 50px;
text-align: center;
display: inline-block;
}
.navigation a:hover, .navigation a:active {
color: #1abc9c;
}
.navigation a.pull {
display: none;
}
/* RESPONSIVE */
#media screen and (max-width: 960px) {
.navigation {
height: auto;
}
.navigation ul {
width: 100%;
display: block;
height: auto;
}
}
#media screen and (max-width: 560px) {
.navigation {
height: auto;
}
.navigation ul {
display: none;
}
.navigation li {
display: block;
float: none;
width: 100%;
}
.navigation a.pull {
display: block;
background-color: #2C3E50;
width: 100%;
position: relative;
}
.navigation a.pull:after {
display: inline-block;
}
.navigation a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}`
You may need some minor adjustments because I'm not 100% sure if this is what you need, but it will help you to find out how to do it. See fiddle here