While trying out flexboxgrid out of the box for the first time in my chrome v46 1366 resolution a sample menu I created appears to be stacked vertically rather than horizontally as a flex layout should be. When you tryout the code in a jsfiddle however, it appears to be okay. I believe it has something to do with the container width? How should i fix it?
Here's the fiddle:
HTML:
<div class="container">
<div class="row center-xs middle-xs">
<div class="col-sm-2 col-xs-4">
<h1>My Logo</h1>
</div>
<div class="col-sm-8 col-sm-offset-2 col-xs-12">
<nav>
<ul class="row">
<li class="col-xs">Home
</li>
<li class="col-xs">About
</li>
<li class="col-xs">Menu
</li>
<li class="col-xs">News
</li>
<li class="col-xs">Photo
</li>
</ul>
</nav>
</div>
</div>
<!--end of .row-->
<h2>A flexible menu based on the
Flexbox Grid framework.
</h2>
<p class="p">Demo by George Martsoukos. See article.</p>
</div>
CSS:
body {
/* display: flex;*/
/* flex-direction: column;*/
background: #4c493e;
color: white;
padding-top: 10px;
}
h1, ul, li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.p {
text-align: center;
color: white;
padding-top: 150px;
font-size: .9em;
}
.p a {
color: white;
text-decoration: underline;
}
/* LOGO STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
margin-left: 5px;
padding: 10px;
font-size: 24px;
background: #ffee91;
}
h1 a {
display: block;
}
/* MENU STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
div.row {
min-height: 80px;
padding-left: 20px;
padding-right: 20px;
margin: 0;
}
.col-xs {
padding: 0;
border-right: solid 1px #444;
}
nav {
margin-right: 5px;
}
ul a {
display: block;
padding: 15px 0;
text-transform: uppercase;
background: #fff0a0;
transition: background .3s ease;
}
ul a:before {
font-family: FontAwesome;
padding-right: 5px;
font-size: 22px;
display: inline-block;
}
ul li:nth-child(1) a:before {
content:'\f015';
}
ul li:nth-child(2) a:before {
content:'\f0eb';
}
ul li:nth-child(3) a:before {
content:'\f115';
}
ul li:nth-child(4) a:before {
content:'\f1ea';
}
ul li:nth-child(5) a:before {
content:'\f03e';
}
ul a:hover {
background: white;
}
/* SECOND LINE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h2 {
text-align: center;
padding: 5px;
}
h2 a {
padding: 5px;
border-bottom: 2px solid #FEB41C;
transition: all .3s ease;
color: white;
}
h2 a:hover {
background: #FEB41C;
color: black;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media screen and (max-width: 876px) {
nav {
margin: 0 5px;
}
div.row {
height: auto;
}
h1 {
font-size: 18px;
}
h1, ul {
margin: 20px 0;
}
ul a {
font-size: 0;
}
ul a:before {
padding: 0 5px;
font-size: 32px;
}
}
#media screen and (max-width: 500px) {
ul a:before {
font-size: 22px;
}
}
#media screen and (min-width: 1600px) {
.col-sm-offset-2 {
margin-left: 16.666%;
}
}
#media screen and (min-width: 1600px) {
.col-sm-offset-2 {
margin-left: 16.666%;
}
}
Here's the image from my browser:
You are missing the flexboxgrid stylesheet link in your primary document, but not the fiddle demo.
Add this to your HTML doc in the <head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css">
It's already in the fiddle (see "External Resources").
Related
This is my first website and i'm doing it for a project at school nut i've got a couple of problems. First, when resizing my website one of my buttons starts to disappear for some reason. Secondly, my background color disappears when going below 992px of width. This project is due this week and this is the last part. Anyways, here is my code, the classes, ids and text are in french but the actual code is in english.The image that doesn't appear is supposed to be 2000px by 391px
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&display=swap');
:root {
--ming: #16697A;
--pacific-blue: #489FB5;
--middle-blue: #82C0CC;
--isabelline: #EDE7E3;
--orange-peel: #FFA62B;
--white: #FFFFFF;
--black: #000000;
}
* {
box-sizing: border-box;
}
html {
font: 400 100%/150% Montserrat, Arial, Helvetica, sans-serif;
color: var(--white);
}
#media screen and (min-width:768px) {
html {
font-size: 100%;
line-height: 150%;
}
}
body {
margin: 0;
}
#entete,
#pied-page {
background: var(--pacific-blue);
color: var(--white);
}
#entete {
padding: 5%;
}
#media screen and (min-width:768px) {
#entete {
padding: 5% 5% 0;
}
}
#media screen and (min-width:992px) {
#entete {
position: sticky;
top: 0;
left: 0;
z-index: 2;
padding: 0;
}
}
#media screen and (min-width:992px) {
.wrapper-navigation {
display: flex;
align-items: flex-end;
max-width: 1400px;
margin: 0 auto;
}
#logo,
#menu {
flex: 0 0 50%;
}
#logo {
padding: 3% 0% 3% 5%;
}
}
#pied-page * {
color: white;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
margin-top: 1rem;
}
#menu ul li a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: .5rem 1rem;
border-bottom: 0.063rem solid #fff;
font-weight: 600;
transition: all .3s ease;
}
#menu ul li a:hover,
#menu ul li a:focus {
color: rgba(255, 255, 255, .5);
}
#menu ul li a span {
font-weight: 400;
}
#menu ul li:last-child a {
border-bottom: none;
}
#media screen and (min-width:768px) {
#menu ul {
display: flex;
}
#menu ul li {
padding-top: .5rem;
}
#menu ul li a {
border-bottom: none;
line-height: 1.125rem;
}
#menu ul li a span {
display: block;
}
#menu ul li.active {
background: white;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#menu ul li.active a {
color: var(--pacific-blue);
}
}
<header id="entete">
<div class="wrapper-navigation">
<div id="logo">
<img src="images-meme/La culture des memes-logo.jpg">
</div>
<nav id="menu">
<ul>
<li>Introduction <span>au site</span></li>
<li><span>Doge</span> Cheems</li>
<li>Spiderman <span>meme</span></li>
<li><span>Clash</span> Royale</li>
<li class="active">Informations <span>importantes</span></li>
</ul>
</nav>
</div>
</header>
Your media queries need to have larger values.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&display=swap');
:root {
--ming: #16697A;
--pacific-blue: #489FB5;
--middle-blue: #82C0CC;
--isabelline: #EDE7E3;
--orange-peel: #FFA62B;
--white: #FFFFFF;
--black: #000000;
}
* {
box-sizing: border-box;
}
html {
font: 400 100%/150% Montserrat, Arial, Helvetica, sans-serif;
color: var(--white);
}
#media screen and (min-width:1328px) {
html {
font-size: 100%;
line-height: 150%;
}
}
body {
margin: 0;
}
#entete,
#pied-page {
background: var(--pacific-blue);
color: var(--white);
}
#entete {
padding: 5%;
}
#media screen and (min-width:768px) {
#entete {
padding: 5% 5% 0;
}
}
#media screen and (min-width:1328px) {
#entete {
position: sticky;
top: 0;
left: 0;
z-index: 2;
padding: 0;
}
}
#media screen and (min-width:1328px) {
.wrapper-navigation {
display: flex;
align-items: flex-end;
max-width: 1400px;
margin: 0 auto;
}
#logo,
#menu {
flex: 0 0 50%;
}
#logo {
padding: 3% 0% 3% 5%;
}
}
#pied-page * {
color: white;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
margin-top: 1rem;
}
#menu ul li a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: .5rem 1rem;
border-bottom: 0.063rem solid #fff;
font-weight: 600;
transition: all .3s ease;
}
#menu ul li a:hover,
#menu ul li a:focus {
color: rgba(255, 255, 255, .5);
}
#menu ul li a span {
font-weight: 400;
}
#menu ul li:last-child a {
border-bottom: none;
}
#media screen and (min-width:768px) {
#menu ul {
display: flex;
}
#menu ul li {
padding-top: .5rem;
}
#menu ul li a {
border-bottom: none;
line-height: 1.125rem;
}
#menu ul li a span {
display: block;
}
#menu ul li.active {
background: white;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#menu ul li.active a {
color: var(--pacific-blue);
}
}
<header id="entete">
<div class="wrapper-navigation">
<div id="logo">
<img src="images-meme/La culture des memes-logo.jpg">
</div>
<nav id="menu">
<ul>
<li>Introduction <span>au site</span></li>
<li><span>Doge</span> Cheems</li>
<li>Spiderman <span>meme</span></li>
<li><span>Clash</span> Royale</li>
<li class="active">Informations <span>importantes</span></li>
</ul>
</nav>
</div>
</header>
The code below has issues.
The CSS code for the menu bar does not seem to be working along with the HTML.
<!DOCTYPE html>
<html>
<body class="news">
<head>
<style type="text/css">body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}</style>
</head>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">About</a></li>
<li class="about">Newsletter</li>
<li class="news">Media</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
</html>
I do not understand why the code does not work.
This is correct code which you need...
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
<!DOCTYPE html>
<html>
<body class="news">
<head>
</head>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">About</a></li>
<li class="about">Newsletter</li>
<li class="news">Media</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
</html>
Here is the deal. I'm trying to create a mobile first navigation bar using css3, html5 and transition properties. I've been successful so far but I am unable to control the transition for when I resize the window (using media queries min-width) from desktop view to mobile view. I've add a Toggle button in the mobile view to create a burger menu that disappears at 600px and vice versa. when the button is unchecked (menu not visible) and I resize the view from desktop to mobile there is a very fast transition that I don't want. I've tried so far so many variants and nothing seems to work. Any suggestion would be greatly appreciated!
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
header {
display: block;
background-color: #FFF;
height: inherit;
}
nav {
text-align: center;
line-height: 3.5em;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: inherit;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: #ededed;
}
nav ul li a {
text-decoration: none;
color: #313131;
}
nav ul li a:hover {
color: #b9b5b5;
}
#menuToggle {
display: none;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
transition: all 300ms ease-in-out;
}
.menu-icon {
float: right;
color: #2f2f2f;
cursor: pointer;
padding-top: 0.46em;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.46em;
text-decoration: none;
font-size: 30px;
}
.menu {
max-height: 0;
transition-property: max-height 0s ease-in-out;
overflow: hidden;
}
#menuToggle:checked ~ header .menu {
max-height: 300px;
transition-property: all 0.6s ease-in-out;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
height: inherit;
}
/*------------ MEDIUM BIG SCREEN -----------------------*/
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
position: relative;
top: -70px;
height: 100%;
max-height: 100%;
transition-property: none;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav {
width: 100%;
}
nav ul {
background-color: #FFF;
display: block;
float: right;
padding: 0.55em 2em 0 0;
height: inherit;
}
nav ul li {
display: inline-flex;
}
nav ul li:hover {
background-color: #FFF;
}
nav ul li a {
padding: 0 2em;
}
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header class="header">
<div id="logo">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
Put everything you only want to happen on the small screen inside:
#media screen and (max-width:599px) {
}
And everything you only want to happen on the large screen inside your:
#media screen and (min-width:600px) {
}
I am trying to create a website using bootstrap and I have used bootstrap before. This time I am making a site with a fixed nav and the logo will be in the middle of the nav links. I also want the logo to be on top of the nav links.
This image will show what I am trying to do:
The code I have now is this:
html, body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-size: 14px;
font-family: 'Helvetica', serif;
}
.navbar {
background: none;
border: none;
margin-top: 20px;
}
.container-fluid {
padding-left: 0px;
padding-right: 0px;
margin-left: -40px;
}
.navbar ul li {
display: block;
text-align: center;
float: left;
width: 20%;
}
.fourth-color {
background-color: #ffecec;
padding-top: 30px;
padding-bottom: 30px;
}
.third-color {
background-color: #122212;
padding-top: 30px;
padding-bottom: 30px;
}
.second-color {
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
}
.first-color {
background-color: #f25727;
padding-top: 30px;
padding-bottom: 30px;
}
<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul>
<li class="first-color">First</li>
<li class="second-color">Second</li>
<li>Logo</li>
<li class="third-color">Third</li>
<li class="fourth-color">Fourth</li>
</ul>
</div>
</nav>
When I try to link an image, it doesn't fit properly and screws with the whole nav bar. Any help is appreciated!
Your problem here is you only have padding on the li's that have classes. (which is why the anchor that says logo is not centered is because it doesn't have a class with padding)
ex.
.navbar ul li {
display: block;
text-align: center;
float: left;
width: 20%;
}
.fourth-color, .third-color, .second-color, .first-color {
padding-top: 30px;
padding-bottom: 30px;
}
Apply the padding to all the lists and you're problem is fixed.
.navbar ul li {
padding-top: 30px;
padding-bottom: 30px;
}
As for the middle logo. You have to use position relative and then add your additional styles to that either by class or in my case :nth-child as seen below.
#import url("http://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext");
html, body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-size: 14px;
font-family: 'Helvetica', serif;
}
.navbar {
margin-top: 1em;
text-align: center;
}
.navbar ul {
padding: 0;
text-decoration: none;
list-style: none;
}
.navbar li {
display: block;
float: left;
width: calc(20% - 1px - 0.906752000000002em);
padding: 1.16em 1em;
font: 100 21px "Raleway", sans-serif;
background: #000;
color: #fff;
opacity: 1;
transition: all 0.1s linear;
}
.navbar li:nth-child(1) {
background: #ff410e;
}
.navbar li:nth-child(2) {
background: #f4ca00;
}
.navbar li:nth-child(3) {
background: #fff;
color: #000;
border: 1px solid #000;
border-radius: 2.84em;
padding: 1.76em 0;
width: 20%;
position: relative;
margin: -0.64em -2.16em;
z-index: 1;
}
.navbar li:nth-child(3) a {
color: #000;
}
.navbar li:nth-child(4) {
background: #99d81b;
}
.navbar li:nth-child(5) {
background: #00abf3;
}
.navbar li:hover:not(:nth-child(3)) {
opacity: 0.7;
}
.navbar a {
color: #fff;
text-decoration: none;
}
.navbar .active {
text-decoration: underline;
}
<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul>
<li><a class="active" href="#">First</a></li>
<li>Second</li>
<li>Logo</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</nav>
Unless you plan on creating a dropdown list I wouldn't recommend using a list for this menubar. Instead you can just style the anchors to fit your needs. (Remember to keep your code DRY):
I'd like to have the navigation bar centered and the text placed to left as it is, but when I add the h3-tag the navigation bar moves to the right. How can I do this?
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
display: inline-block;
float: left;
font-style: bold;
font-size: 2em;
color: white;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
I used the navigation bar from: http://css-snippets.com/drop-down-navigation/
Anything that is in the document flow is going to affect the position of the menu. So you would would have to take the h3 out of the flow by positioning it absolutely.
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
This has other issues but solves your initial problem.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
/*
display: inline-block;
float: left;
*/
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
Its because your h3 is inside the nav div. try making the h3 absolute positioned and your .nav class relatively positioned.