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;
}
}
Related
I'm making a navbar for my site following a tutorial. While working on my mobile menu responsiveness I made a ".burger" class with three "bars" to represent the menu. For some reason the menu icon doesn't show at all.
Code: https://gist.github.com/VlatkoStojkoski/290234f49a6f4e51019ca4b014c03f37
You have wrong css selector in media query.
add this to #media screen and (max-width: 775px).
nav .burger {
display: block;
}
It's because you set display: none to the menu. Even though you added a media query with display: block on the bottom, the first one will always rule.
You should add a media query to the first rule and you can remove the display: block on the bottom.
.burger {
#media screen and (min-width: 775px) {
display: none;
}
}
So this is your complete code:
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
$text-color: whitesmoke;
$font-stack: "Source Sans Pro", sans-serif;
$nav-color: rgba(79, 91, 102, 0.8);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
font-family: $font-stack;
background-color: $nav-color;
h1 {
letter-spacing: 5px;
font-size: 30px;
color: $text-color;
}
img {
width: 64px;
}
ul {
display: flex;
width: 35%;
justify-content: space-around;
a {
font-size: 21px;
color: $text-color;
text-decoration: none;
}
li {
list-style: none;
}
}
.burger {
#media screen and (min-width: 775px) {
display: none;
}
div {
width: 30px;
height: 4px;
background-color: $text-color;
margin: 5px;
}
}
}
#media screen and (max-width: 1024px) {
nav ul {
width: 50%;
}
}
#media screen and (max-width: 775px) {
body {
overflow-x: hidden;
}
nav ul {
position: absolute;
right: 0px;
height: 88vh;
top: 12vh;
background-color: $nav-color;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
li {
opacity: 0;
}
}
}
* {
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>
I'm trying to center a logo and menu list in the center of the page (keeping them side by side on desktop view) and stacked in mobile view. My problem is making them neatly stacked in mobile view. For some reason when it goes into mobile, all the items get pushed down. I'm also trying to having the social media links stay right at the bottom of the viewport at across all devices.
Here is my code:
https://jsfiddle.net/bp8epdbx/1/
HTML:
<div class = "container">
<div class="block" style="height: 600px;">
<div class="centered centered-mobile">
<img src="http://allprofitorganization.com/wp-content/uploads/2017/08/home-logo-delete.png" />
</div>
<div class="centered vertical-menu">
EVENTS
STORE
ARTISTS
</div>
</div>
<div id="manu-social" class="manu">
<div id="manu-social" class="manu"></div>
<ul id="manu-social-items" class="manu-items">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS:
body {
background: #fff;
}
img{
width: 270px;
height: 100%;
}
.block {
text-align: center !important;
margin: 80px !important;
HEIGHT: 300px;
}
.block:before {
content: '\200B';
/* content: '';
margin-left: -0.25em; */
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
margin: 15px;
}
.logo
{
float: left;
vertical-align: middle;
width: 300px;
margin: 15px;
}
.nav
{
float: right;
vertical-align: middle;
width: 300px;
margin: 15px;
}
.vertical-menu {
width: 85px;
}
.vertical-menu a {
font-size: 16px !important;
color: black;
display: block;
padding: 12px;
text-decoration: none;
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}
.vertical-menu a:hover {
color: red !important;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
#manu-social {
padding: 20px 0;
}
#manu-social ul {
list-style: none;
text-align: center;
margin: 0;
padding: 10px 0;
}
#manu-social ul li {
display: inline-block;
position: relative;
}
#manu-social li a {
color: #D3D3D3;
margin: 0 10px;
}
#manu-social li a:hover {
color: red;
}
#manu-social li a::before {
content: "\f135";
display: inline-block;
padding: 0 5px;
font-family: FontAwesome;
font-size: 24px;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#manu-social li a[href*="facebook.com/allprofitofficial"]::before {
content: "\f09a";
}
#manu-social li a[href*="twitter.com/realallprofit"]::before {
content: "\f099";
}
#manu-social li a[href*="instagram.com/allprofitofficial"]::before {
content: "\f16d";
}
a {
-webkit-transition: .15s all linear;
-moz-transition: .15s all linear;
-o-transition: .15s all linear;
transition: .15s all linear;
}
#media screen and (max-width: 960px) { /* whatever width you prefer */
.nav, .logo {
float:none;
position: static;
/* width: auto; -- may be helpful */
}
}
#media screen and (max-width: 720px) {
.nav {
/* display: none; —- remove the menu, perhaps */
}
}
#media print, screen and (max-width: 480px) {
.content, .menu {
/* more targetting -- usually margins and padding adjusting */
}
}
You can use flexbox to vertically and horizontally center the logo and nav on desktop and then just change the flex-direction for mobile to get them to stack.
.block {
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (max-width: 480px) {
.block {
flex-direction: column;
}
}
You can create a fixed footer like this,
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
so apply this code to your social icons and they will always be at the bottom of the page if you only want them at the bottom of the page on mobile view then wrap it in a media query as for your other content once the footer is fixed just minus margin margin: - //whatever number looks right
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 :-)
Basically I wanted to create a media query which would make my nav bar disappear and change into a menu icon... however it still won't show. Does anyone have a solution? Here's my code:
<header>
<div id="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Latest Videos</li>
<li>About Me</li>
</ul>
</nav>
</header>
my CSS:
nav {
float: right;
padding: 35px 20px 20px 0px;
}
#menu-icon{
display: hidden;
width: 40px;
height: 40px;
background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
nav ul li {
font-size: 25px;
display: inline-block;
float: left;
padding: 20px;
}
.current {
color: #fff;
text-decoration: underline;
}
and finally my media query:
#media screen and (max-width: 478) {
body {
position: absolute;
}
}
#media screen and (max-width: 478) {
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background-color: #405580;
border: 1px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width:: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
}
According to the docs, looks like you need to add the px after 478:
#media screen and (max-width: 478px) {
body {
position: absolute;
}
}
#media screen and (max-width: 478px) {
First off display: hidden; isnt a thing. You are looking for display:none.
Additionally you can use visibility: hidden; or visibility: visible;
If an object is set to display:none. And then you want to reveal it again at a specific screen width. You need to change the display value of that object in your media query.
display:block; or display:inline-block; or even in some cases display:inline;
For example:
#menu-icon{
display: none;
width: 40px;
height: 40px;
background-image: url(http://www.w3newbie.com/wp-content/uploads/icon.png) center;
}
#media screen and (max-width: 478px) {
#menu-icon{
display: block;
}
}