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;
}
Related
I was creating a responsive website so I decided to create the tablet and mobile version and wanted to be as usual many developers do when creating a small device nav bar(burger bar). So I can add class to html file using javascript but after that there is a problem that i'm stock an hour. Thanks
here you can see the code:
codepen
document.querySelector("button").addEventListener("click", show);
function show() {
let list = document.querySelector("ul");
if (list.className != "hidden") {
list.className = "bar";
} else if (list.className == "hidden") {
list.className -= "bar";
list.className = "hidden";
}
}
header button {
float: right;
margin: 25px 25px;
border: none;
cursor: pointer;
}
header button .fa-bars {
font-size: 25px;
background-color: white;
}
header img {
padding: 25px 75px;
}
header nav {
margin-top: 25px;
margin-left: 75px;
}
.bar li {
padding: 30px 0;
border-bottom: 1px #cecece solid;
width: 85%;
}
.hidden {
visibility: hidden;
}
<header>
<img src="images/logo-black.png" alt="NewsBit" />
<button type="button">hello</button>
<nav>
<ul>
<li>NEWS</li>
<li>GUIDS & ANALYTICS</li>
<li>EVENTS</li>
<li>EXPLAINED</li>
<li>ICON CALENDAR</li>
</ul>
</nav>
</header>
CSS
In mobile, ul should be hidden by default and when you click you need to show.
In large device, button should not be there.
JS
There is a out-of-box method toggle on classList to toggle the class. No need to check conditionally.
Hope it helps ☺☺
document.querySelector("button").addEventListener("click", show);
function show() {
let list = document.querySelector("ul");
list.classList.toggle("show");
}
header button {
float: right;
margin: 25px 25px;
border: none;
cursor: pointer;
}
header button .fa-bars {
font-size: 25px;
background-color: white;
}
header img {
padding: 25px 75px;
}
header nav {
margin-top: 25px;
margin-left: 75px;
}
.bar li {
padding: 30px 0;
border-bottom: 1px #cecece solid;
width: 85%;
}
ul {
display: none;
}
.show {
display: block;
}
#media only screen and (min-width: 992px) {
ul {
display: block;
}
button {
display: none;
}
}
<header>
<img src="images/logo-black.png" alt="NewsBit" />
<button type="button">
show/hide
</button>
<nav>
<ul>
<li>NEWS</li>
<li>GUIDS & ANALYTICS</li>
<li>EVENTS</li>
<li>EXPLAINED</li>
<li>ICON CALENDAR</li>
</ul>
</nav>
</header>
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>
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 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 have put together a website - hosted here: http://curleylab.psych.columbia.edu/
I have used modernizr.js - http://curleylab.psych.columbia.edu/js/modernizr.js
css stylesheet is here - http://curleylab.psych.columbia.edu/css/css1.css
For the menu at the top (visible and working on desktops), I have actually used <footer> tags for each page. That bit of HTML looks like this:
<footer role="contentinfo">
<div>
<nav id="menu">
<ul role="navigation" class="nav">
<li><strong>Curley</strong>Lab </li>
<li>Research</li>
<li>Personnel</li>
<li>Publications</li>
<li>Teaching</li>
<li>R packages</li>
<li>R instruction</li>
<li>Contact</li>
</ul>
</nav>
</div>
</footer>
The relevant bits of css that apply to <footer> appear here:
/*Footer*/
footer[role=contentinfo] {
color: #fff;
background: #000;
margin: 0 -1em;
position: fixed;
z-index: 2;
}
footer[role=contentinfo] > div {
max-width: 70em;
padding: 0 1em;
margin: 0 auto;
overflow: hidden;
}
footer[role=contentinfo] p {
margin: 0;
}
footer[role=contentinfo] .nav li a {
display: block;
border-bottom: 1px solid #808080;
padding: 1em;
margin: 0 -1em;
}
footer[role=contentinfo] a {
display: inline-block;
padding: 0.5em 0;
}
footer[role=contentinfo] a.nav-home {
color: #fff;
}
footer[role=contentinfo] .f-rga {
padding: 0.6em 0;
}
footer[role=contentinfo] img {
max-width: 4.4em;
display: inline-block;
margin-bottom: -0.22em;
}
/*End Footer*/
/* Footer */
footer[role=contentinfo] {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
footer[role=contentinfo] .nav {
float: left;
}
footer[role=contentinfo] .nav li {
display: inline-block;
margin-right: 0.8em;
}
footer[role=contentinfo] .nav li a {
border: 0;
font-size: 110%;
}
footer[role=contentinfo] .f-rga {
float: right;
}
The issue is that it seems to be working well enough on desktops, but on mobile devices the menu (everything contained in the footer) just doesn't appear. Any help greatly appreciated.