* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
font-size: 14px;
}
header {
width: 100vw;
height: 50px;
background-color: #222;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Container for the Left and Right nav sections*/
header>div {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1140px;
width: 100%;
padding: 0 20px;
}
/* adjust width to set size */
nav {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
nav ul {
list-style-type: none;
display: flex;
padding: 0 20px;
}
nav a {
padding: .8rem 1rem;
}
header>div>a {
font-size: 18px;
border-bottom:
}
.a-tag-header {
text-decoration: none;
color: #999;
display: block;
}
nav a:hover {
color: #fff;
}
/* -- Menu Toggle -- */
.MenuToggle {
display: none;
}
#media screen and (max-width: 890px) {
/* Header */
header {
height: auto;
}
header>div {
flex-direction: column;
padding: 0;
}
nav {
display: flex;
width: 100%;
flex-direction: column;
}
nav ul {
flex-direction: column;
text-align: center;
align-items: center;
padding: 0;
}
nav ul li {
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
nav ul li:hover {
background-color: aqua;
}
header>div>a {
padding: .8rem 0;
}
header>div>a:hover {
background-image: #eee;
}
/* -- Menu Toggle -- */
.MenuToggle {
display: inline-block;
color: #F0F0F0;
font-size: 22px;
cursor: pointer;
position: absolute;
}
}
<header>
<div>
<a class="a-tag-header">Chemical Finger Print Analysis</a>
<div class="MenuToggle">
<span id="MenuToggleButton" onclick="NavToggle()">☰</span>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
<div class="MenuToggle">
<span id="MenuToggleButton" onclick="NavToggle()">☰</span>
</div>
</div>
</header>
Hi i'm creating a flexbox navigation bar (Desktop First), this contains a title, and a nav with two separate tags. Iv'e gotten the nav and ul tags to act in a responsive manner however I cannot seem to figure out how to get the title and the menu toggle to share the top container responsively when a screen is smaller than 850px, I've tried a number of fixes but i can't seem to figure it out. Please Help
Try this
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
☰
</div>
</body>
</html>
Related
I have an navbar with centered li items. Two of this li items should have an dropdown while hovering over them. I tried this but the dropdown-content appears in the navbar container.
I tried this with the .dropdown and while hovering over it, the .dropdwon-content should be visible under the red border of the navbar.
My Code:
function resNavBar() {
var x = document.getElementById("idTopNav");
var y = document.getElementById("idHomeBtn");
var z = document.getElementById("idIconClose");
var zz = document.getElementById("idIconMenu");
if (x.className === "topnav" & y.className === "homebtn") {
x.className += " responsive";
y.className += " responsive";
z.className = "icon-close";
zz.className += " invisible";
} else {
x.className = "topnav";
y.className = "homebtn";
z.className += " invisible";
zz.className = "icon-menu";
}
}
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
height: 100%;
}
html {
height: 100%;
}
body * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
header .topnav {
background-color: #201D1D;
overflow: hidden;
border-bottom: 4px solid #A90101;
}
header .topnav li {
list-style: none;
list-style-type: none;
}
header .topnav li a {
color: #fff;
display: block;
text-align: center;
float: left;
font-family: 'Roboto Condensed', sans-serif;
font-size: 25px;
text-decoration: none;
padding: 0.5em 1.2em;
}
header .topnav li a:hover {
background-color: #A90101;
color: #201D1D;
}
header .topnav .icon-home {
display: none;
font-size: 1.5rem;
padding: 0.5em 1em;
color: #fff;
}
header .topnav .topnav a.icon-menu,
header .topnav .topnav a.icon-close {
display: none;
}
header .topnav .dropdown {
position: relative;
display: inline-block;
}
header .topnav .dropdown .dropdown-content {
display: none;
position: absolute;
background-color: #f8f9fa;
min-width: 10vw;
z-index: 1;
padding: 12px 16px;
}
header .topnav .dropdown:hover .dropdown-content {
display: block;
}
// Responsive:
#media screen and (max-width: 1000px) {
.topnav ul li a {
display: none;
}
.topnav a.icon-home {
float: left;
display: block;
}
.topnav a.icon-menu {
float: right;
display: block;
font-size: 1.5rem;
padding: 0.5em 1em;
color: #fff;
}
.topnav a.icon-close {
float: right;
display: block;
font-size: 1.6rem;
padding: 0.5em 1em;
color: #fff;
}
}
#media screen and (max-width: 1000px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon-home {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a.icon-menu {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a.icon-close {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.homebtn.responsive {
display: none;
}
.topnav a.icon-close.invisible {
display: none;
}
.topnav a.icon-menu.invisible {
display: none;
}
}
#media screen and (min-width: 1000px) {
.topnav-mid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.topnav a.icon-close {
display: none;
}
.topnav a.icon-menu {
display: none;
}
}
<!---HTML:--->
<header>
<nav class="topnav">
<div class="homebtn" id="idHomeBtn">
<a href="index.html" class="icon-home" onclick="none">
<i class="fas fa-home"></i>
</a>
</div>
<ul class="topnav-mid">
<li>link</li>
<li>link</li>
<li>link</li>
<li class="dropdown">link
<!--! DROPDOWN -->
<div class="dropdown-content dropdown-content-about">
link
<li>link</li>
</ul>
<a href="javascript:void(0);" class="icon-close invisible" id="idIconClose" onclick="resNavBar()">
<i class="fas fa-times"></i>
</a>
<a href="javascript:void(0);" class="icon-menu" id="idIconMenu" onclick="resNavBar()">
<i class="fas fa-bars"></i>
</a>
</nav>
</header>
<script src="js/responsive.js"></script>
Has anyone an idea why the dropdown is in the navbar?
The dropdown is in the navbar because you don't give it a position. Just add a top attribute to the .dropdown-content.
header .topnav .dropdown .dropdown-content {
display: none;
position: absolute;
background-color: #f8f9fa;
min-width: 10vw;
z-index: 1;
padding: 12px 16px;
top: 100%;
}
And you need to get rid of the overflow on your .topnav element.
Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>
I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names
right now the purple just covers the text but it should be a nice block of colour like the dropdown is. Also, I have a bar under my nav img that should not be there when I hover. I know it is a width/height thing, but no matter where I put the code it does not work.
https://codepen.io/Smoki248/pen/NWxrOWK
li {
list-style: none;
}
a {
color: #f2f2f2;
text-decoration: none;
}
a:hover {
background-color: #8781bd;
}
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 400;
font-family: "Amatic SC", Roboto, sans-serif;
border: 1px #8781bd solid;
border-radius: 2px;
background: #8781bd;
color: #f2f2f2;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 0px;
display: flex;
align-items: center;
background-color: #2f2f2f;
}
#media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
#media (max-width:650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}
h1 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 35pt;
width: 100%;
text-align: center;
}
h2 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 24pt;
width: 100%;
text-align: center;
}
nav li {
padding-bottom: 30px 0px;
}
nav > ul {
width: 30vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
.dropdown > li{
float: right;
overflow: hidden;
}
.dropdown > li a {
font-size: 16px;
border: none;
outline: none;
color: #f4f4f4;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav > li a:hover, .dropdown:hover a {
background-color: #8781bd;
color:#f4f4f4;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: #f4f4f4;
z-index: 1;
margin-top: 20px;
min-width: 100px;
}
.dropdown-content li a {
float: none;
color: #f4f4f4;
padding: 10px 14px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #625aa9;
color: #f4f4f4;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header id="page-wrapper">
<header id="header">
<div class="logo">
<nav>
<a href="http://www.wrecklessdevelopment.com"><img id="header-img"
src="images/wreckless-development-logo.gif" alt="Wreckless Development Logo"/></a>
</nav>
</div>
<h1>Wreckless Development</h1>
<nav id="navbar">
<ul>
<li>About</li>
<li>Services</li>
<div class="dropdown">
<li><i class="fa fa-caret-down"></i> Portfolio<li>
<div class="dropdown-content">
<ul>
<li>Photography</li>
<li>Composite</li>
<li>Logos</li>
<li>Branding</li>
<li>Advertising</li>
</ul>
</div>
</div>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</header>
</header>
The problem is tag a's default display is inline, so if you want to adjust height of a tag, you have to change it's default display to display: inline-block like this, and then you may be able to do whatever you want with that a tag, you can refer my code below for more details:
#header a {
display: inline-block; // change display style
height: 75px;
line-height: 75px; // center the text
padding-left: 12px;
padding-right: 12px;
}
.dropdown > li > a {
padding: 0 16px; // no need to padding top and bottom because we already had line-height and height
}
.dropdown-content{
margin-top: 75px; // push the .dropdown-content further to fit new css
}
#header .dropdown-content li a{
display: block; // set an <a> tag to full with of the dropdown
height: auto;
line-height: 16px; // center the text with current font-size
}
you can take a look in my codepen.io for more details here. Hope it will help
I was attempting to build a responsive nav using flexbox. When the screen is smaller than 744px, I wanted a toggle button to appear, the main nav to have a max-height of 0, and then on click, have the nav display in block. Fairly typical stuff.
However, I'm used to doing this just with floats and I'm running into several problems:
I don't understand how to drop the UL below the nav without pushing the nav logo and toggle up;
The UL with the LI doesn't seem to be responding to the max-height trick.
If anyone can provide some assistance or point me in the direction of tutorial that would be great.
* {
margin: 0;
padding: 0;
}
body {
font-family: 'open-sans', 'sans-serif';
font-size: 17px;
color: #444;
}
.navText {
font-size: 14px;
}
nav {
height: 100%;
width: 100%;
background-color: white;
}
.nav-fixedWidth {
//border: 1px solid;
min-height: 120px;
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.mainNav {
list-style: none;
display: flex;
}
.mainNav li {
margin-right: 60px;
padding: 10px;
//border: 1px solid;
}
.mainNav li:nth-child(5){
margin-right: 10px;
}
.mainNav li a {
text-decoration: none;
color: #444;
display: block;
}
.mainNav li a:hover {
color: #9d9d9d;
}
.logo {
height: 60px;
width: 60px;
background-color: #ccc;
}
.toggle {
height: 60px;
width: 60px;
background-color: #ccc;
display: none;
}
#media screen and (max-width: 960px) {
.nav-fixedWidth
{
width: 95vw;
}
}
#media screen and (max-width: 744px) {
.nav-fixedWidth
{
flex-wrap:wrap;
}
.toggle
{
display: block;
}
}
<nav>
<div class="nav-fixedWidth">
<div class="logo"></div>
<div class="toggle"></div>
<ul class="mainNav">
<li class="navText">Webinars</li>
<li class="navText">e-Books</li>
<li class="navText">Blog</li>
<li class="navText">e-Course</li>
<li class="navText">Search</li>
</ul>
</div>
</nav>
I know this might be a bit late for your particular need, but you might want to take a look at this solution by Chris Coiyer
https://codepen.io/chriscoyier/pen/GJRXYE
html {
background: #666;
}
body {
width: 60%;
margin: 0 auto;
background: white;
}
.nav {
position: relative;
ul {
display: flex;
height: 3rem;
overflow: hidden;
flex-wrap: wrap;
list-style: none;
padding: 0;
width: 80%;
}
li {
a {
display: block;
padding: 1rem 0.5rem;
text-decoration: none;
white-space: nowrap;
}
}
&.open {
ul {
height: auto;
display: block;
}
}
}
.x {
position: absolute;
top: 0.75rem;
right: 0.75rem;
cursor: pointer;
}
This solution does require a small amount of JavaScript to toggle the menu.
Hope it helps :-)
I want my .logo to be in the middle for the small screens, and on the left for all of the other screens. The .logo stays on the left until the screen gets big and then moves a little to the right, but I would like it to stay into the middle until the screen gets to the breakpoint for bigger screens. I don't know a whole lot about flexbox, but I was hoping that y'all would be able to tell me how to do this!
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mad Men Software | Sometimes Crazy is Just What We Need</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="css/normalize.min.css">
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<ul class="nav">
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>
and here is my css:
/******************************
Flexbox Layout
*******************************/
.header, .nav {
display: flex;
flex-direction: column;
}
.header {
justify-content: space-between;
}
.nav {
flex: 1;
justify-content: space-around;
}
#media all and (min-width: 670px) {
.header, .nav {
flex-direction: row;
}
}
#media all and (min-width: 1030px) {
.nav {
flex: none;
}
}
/******************************
Additional Styling
*******************************/
body {
margin: 0;
font-family: Helvetica;
background: #5fcf80;
}
.header {
padding: 10px 0;
margin: 0 auto;
}
.logo {
background: url('/HTML/MadMenTransparent/MadMenOfficialLogo.png') center center no-repeat;
width: 150px;
min-height: 70px;
background-size: contain;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.nav {
list-style: none;
}
.nav li {
margin: 12px 0 12px 28px;
}
.nav li a {
text-decoration: none;
color: #fff;
font-size: 12px;
text-transform: uppercase;
}
.nav li a:hover {
color: rgba(255,255,255,0.7);
}
.nav li:last-child a {
background: rgba(255,255,255,0.3);
border-radius: 2px;
transition: 200ms ease-in-out;
padding: 8px 16px 7px;
}
.nav li:last-child a:hover {
background: rgba(255,255,255,0.5);
color: #fff;
}
#media all and (min-width: 1030px) {
.header {
width: 1030px;
min-width: 768px;
}
}
/*************************
Clearfix
*************************/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
You can add a breakpoint at ur css like this:
#media only screen and (min-device-width: 700px) and (max-device-width: 1024px) {
header {
position: relative;
}
header ul.nav {
margin-top: 150px;
}
.logo {
position: absolute;
left: 50%;
margin-left: -75px;
}
}