I Want to align this header section part in the vertical center with responsiveness. Now if I use margin-top then the page is not fully responsive and I want to align the header part at the start of the input.
{
margin: 0px;
padding: 0px;
color: white;
}
#header{
height: 300px;
width: 100%;
background-image: url(healthy.jpg);
}
#headersection{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#headersection input{
width: 50%;
height: 40px;
border-radius: 20px;
border: none;
}
#navigation{
display: flex;
flex-wrap: wrap;
}
#navigation li{
font-weight: bold;
font-size: 1rem;
padding: 20px;
list-style: none;
}
<nav id="header">
<ul id="navigation">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
<div id="headersection">
<h1>
Health is Wealth
</h1>
<input type="search" name="Search" id="" placeholder="Search">
</div>
</nav>
I want to align this input and header part in the blue section and with that, I want to align my header part at the start of this input section as shown with yellow lines.
use the attribut valign="middle" for #headersection so you don't have to use margin-top, it will put it in the middle and then get rid of align-items for #headersection
If the width of the headersection is as wide as the input, you can use
#headersection{
align-items: flex-start;
}
You should add a <div class="container"> </div> first.
Set the max-width value for this div to adjust the start of navigation text.
As you want to align my header part at the start of this input section as shown with yellow lines, you need to add #navigation > li:nth-child(1){padding-left: 0;} in your css.
I hope the following code would help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
color: white;
background-color: lightgreen;
background-image: url(healthy.jpg);
}
#header {
height: 300px;
width: 100%;
}
#headersection {
display: flex;
flex-direction: column;
/* align-items: center;
justify-content: center; */
}
#headersection input {
width: 100%;
height: 40px;
border-radius: 20px;
border: none;
background: white;
}
#navigation {
display: flex;
flex-wrap: wrap;
}
#navigation li {
font-weight: bold;
font-size: 1rem;
padding: 20px;
list-style: none;
}
#navigation > li:nth-child(1){
padding-left: 0;
}
.container {
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<nav id="header">
<ul id="navigation">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
<div id="headersection">
<h1>Health is Wealth</h1>
<input type="search" name="Search" id="" placeholder="Search" />
</div>
</nav>
</div>
</body>
</html>
Try this:
*{
margin: 0px;
padding: 0px;
color: white;
}
#header{
height: 300px;
width: 100%;
background-color: red; /*instead your image. only for seen*/
}
#headersection{
display: flex;
flex-direction: column;
/*align-items: center; deleted*/
justify-content: center;
height: 100%; /*added*/
width: 50%; /*added*/
}
#headersection input{
width: 100%; /*edited*/
height: 40px;
border-radius: 20px;
border: none;
}
#navigation{
display: flex;
flex-wrap: wrap;
}
#navigation li{
font-weight: bold;
font-size: 1rem;
padding: 20px;
list-style: none;
}
#container{ /*added*/
display: flex;
justify-content: center;
width: 100%;
height: 60%;
}
<nav id="header">
<ul id="navigation">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
<div id="container">
<div id="headersection">
<h1>
Health is Wealth
</h1>
<input type="search" name="Search" id="" placeholder="Search">
</div>
</div>
</nav>
I edited. If it is proper, please comment for me.
Related
Trying to separate the logo flex box from the social flex box to put fb tt Instagram logos, but it won't work.
Also, I'm trying to make the logo bigger without increasing the header size, trying to make all more slim but without success.
Any tips for both problems?
body {
background-color: #45a29e;
margin: 0;
padding: 0;
}
.head {
background-color: #137B77;
margin: 0;
padding: 0;
align-items: center;
display: flex;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
}
.main-header {
display: flex;
align-items: center;
}
.header-menus {}
.header-menus ul li {
list-style: none;
margin-left: 10px;
color: #000000;
}
.header-menus ul li a {
color: #000000;
text-decoration: none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
.logo-image {
width: 100%;
}
.social {
width: 100px;
height: 150px;
background-color: blue;
}
.social-menu {
display: flex;
align-items: center;
}
<div class="wrapper">
<header class="head">
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
<div class="main-header">
<div class="logo-image">
<img src="https://via.placeholder.com/50" alt="Makeup" class="center">
</div>
</div>
<div class="social-menu">
<link rel="stylesheet" type="text/css" href="photos/facebook.png">
f
</div>
</header>
</div>
I'm not sure about your logo without seeing the dimensions of the actual image. I have substituted my own image address for the sake of this question. Some of your code is not necessary such as the .center class. most of what you want to accomplish can be achieved by using some justify-content styling and manually adjusting the position of the logo. Also, you are targeting the logo-image div for the size but if you adjust the actual tag then you can change the size without too much issues. If the logo image is square then you will have some issues with sizing but you could use a negative top and bottom margin on the .image-logo class to remove the extra space.
<style>
body {
background-color: #45a29e;
margin: 0;
padding: 0;
}
.head {
background-color: #137B77;
margin: 0;
padding: 0 25px;
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
}
.main-header {
display: flex;
position: relative
}
.header-menus {
}
.header-menus ul {
list-style: none;
color: #000000;
display: flex;
justify-content: space-evenly;
padding-left: 0;
}
.header-menus li {
padding-left: 20px;
}
.header-menus li:first-child {
padding: 0;
}
.logo-image img {
max-width: 150px;
position: relative;
right: 75px
}
.header-menus ul li a {
color: #000000;
text-decoration: none;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
.social {
background-color: blue;
}
.social-menu {
display: flex;
align-items: center;
}
</style>
<body>
<div class="wrapper">
<header class="head">
<div class="header-menus">
<ul>
<li>
Home
</li>
<li>
Contato
</li>
<li>
Portfólio
</li>
<li>
Localização
</li>
</ul>
</div>
<div class="main-header">
<div class="logo-image">
<img src="https://www.simpleskincare.com/sk-eu/content/dam/brands/simple/global_use/1620325-new-logo-simple.png.rendition.680.680.png" alt="Makeup" class="center">
</div>
</div>
<div class="social-menu">
<link rel="stylesheet" type="text/css" href="photos/facebook.png">
f
</div>
</header>
</div>
</body>
An image of the resulting render with this code
FontAwesome class fix (the first class is usually not fa. fab is used for brands, fas for solid icons etc)
fa fa-facebook -> fab fa-facebook
added flex: 1 to nav menu & social menu
added flex: 3 to main header
When used with positive numbers, flex can split sections proportionally:
// 20% navigation 60% main 20% social
.head align-items: stretch rather than center (expands to fill height, rather than just staying same and being centered) [could also use align-self on .main-header]
// .main-header align-items: stretch so .logo-image expands
.logo-image - display:flex; in order to center the img
.logo-image{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
Center logo image, width/height: auto (keeps aspect ratio and expands), padding: 1em so there is some space around it
.logo-image img {
padding: 1em;
width: auto;
height: auto;
}
body{
background-color: #45a29e;
margin: 0;
padding: 0;
}
.head{
background-color: #137B77;
margin: 0;
padding:0;
align-items: stretch;
display: flex;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
}
.main-header{
flex: 3;
display: flex;
align-items: stretch;
}
.header-menus{
flex: 1;
}
.header-menus ul li {
list-style: none;
margin-left: 10px;
color: #000000;
}
.header-menus ul li a{
color: #000000;
text-decoration:none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
.logo-image{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.logo-image img {
padding: 1em;
width: auto;
height: auto;
}
.social{
width: 100px;
height: 150px;
background-color: blue;
}
.social-menu{
flex: 1;
display: flex;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/css" href="Makeup.css">
<meta charset="UTF-8">
<meta name="author" content="Thiago Marvin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header class="head">
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
<div class="main-header">
<div class="logo-image">
<img src="https://picsum.photos/seed/picsum/400/100" alt="Makeup" class="center">
</div>
</div>
<div class="social-menu">
<a class="fab fa-facebook"></a>
<a class="fab fa-instagram"></a>
</div>
</header>
</div>
</body>
</html>
HTML
This is my HTML source code where I want to make a menu list with flexbox and grid.
<!DOCTYPE html>
<html>
<head>
<title>dmghdfjb</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<div id="brand">
<img src="images/22.jpg">
<ul class="menulist">
<li class="list">Home</li>
<li class="list square"><a href=entry.html>Booking</a></li>
<li class="list square">Resturant</li>
<li class="list square">Overview</li>
<li class="list square">Login</li>
</ul>
</div>
</header>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
width: 100%;
background-color: #EC8C01;
height: 100px;
display: flex;
align-content: center;
}
#brand{
width: 200px;
height: 98px;
}
#brand > a > img{
width: 100%;
height: 100%;
}
#menu{
display: flex;
}
.menulist{
background-color: red;
list-style: none;
padding: 5px;
text-align: center;
display: inline-grid;
grid-template-columns: repeat(5,100px);
grid-gap: 5px;
justify-content: end;
}
.list{
background-color: green;
padding: 10px;
border-radius: 40px;
}
In the above code, My menu list not showing in the brand area. I want to make a menu list that is fixed inside ` without using position property of CSS. How to fix it?
See this works for you.
*{
margin: 0;
padding: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
width: 100%;
background-color: #EC8C01;
height: 100px;
display: flex;
align-content: center;
}
#brand{
width: 200px;
height: 98px;
}
#brand > a > img{
width: 100%;
height: 100%;
}
.menu-wrapper{
margin-top: 24px;
}
#menu{
display: flex;
}
.menulist{
background-color: red;
list-style: none;
padding: 5px;
text-align: center;
display: inline-grid;
grid-template-columns: repeat(5,100px);
grid-gap: 5px;
justify-content: end;
float: right;
margin-right: 34px;
}
.list{
background-color: green;
padding: 10px;
border-radius: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>dmghdfjb</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<div id="brand">
<img src="https://www.internetkatta.com/wp-content/uploads/2015/04/logo350.png">
</div>
<div class="menu-wrapper">
<ul class="menulist">
<li class="list">Home</li>
<li class="list square"><a href=entry.html>Booking</a></li>
<li class="list square">Resturant</li>
<li class="list square">Overview</li>
<li class="list square">Login</li>
</ul>
</div>
</header>
</body>
</html>
I am not completely sure if I am understanding your point completely So giving answer in points.
If you just want to hide the scroll bar at the bottom you can use ::-webkit-scrollbar pseudo-element in the CSS [MDN blog for this](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar.
If you just don't want to have any elements outside the screen you can always use overflow in the CSS to limit that. MDN blog for Overflow CSS
For better flow than just the overflow, you will have to start designing your pages in a more responsive way.
HTML
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
width: 100%;
background-color: #EC8C01;
height: 100px;
display: flex;
align-content: center;
}
#brand{
width: 200px;
height: 98px;
}
#brand > a > img{
width: 100%;
height: 100%;
}
.menu-wrapper{
margin-top: 24px;
}
#menu{
display: flex;
}
.menulist{
background-color: red;
list-style: none;
padding: 5px;
text-align: center;
display: inline-grid;
grid-template-columns: repeat(5,100px);
grid-gap: 5px;
justify-content: end;
/*float: right;*/
margin-right: 34px;
}
.list{
background-color: green;
padding: 10px;
border-radius: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>dmghdfjb</title>
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div id="brand">
<img src="https://www.internetkatta.com/wp-content/uploads/2015/04/logo350.png">
</div>
<div class="menu-wrapper">
<ul class="menulist">
<li class="list">Home</li>
<li class="list square"><a href=entry.html>Booking</a></li>
<li class="list square">Resturant</li>
<li class="list square">Overview</li>
<li class="list square">Login</li>
</ul>
</div>
</header>
</body>
</html>
Here is no use of float:right;
#aviboy.
I am learning how to create header and I have problem with proper link href. My logo-box wraps image(logo) and name of the company but in order to align them with display flex it covers full width. I want that href only works when I hover logo or name not whole box. I don't know how to solve this problem.
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<div class="logo-block">
<a href="" class="logo-block-link">
<img src="logo.png" alt="" class="logo">
<h3 class="logo-tittle">Company</h3>
</a>
</div>
<ul class="nav-list">
<li>About</li>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
nav{
background-color: salmon;
}
.container{
padding: 15px 0;
background-color: #fdcb9e;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
margin: 0 auto;
}
.logo-block{
flex:1;
border:1px solid gold;
}
.logo-block-link{
display: flex;
border:1px solid black;
}
.logo{
width: 50px;
height: 50px;
}
.nav-list{
flex:1;
display: flex;
justify-content: space-between;
}
.logo-tittle{
font-size:20px;
color:#3f3f44;
text-transform: uppercase;
letter-spacing: 2px;
font-family: monospace;
margin-left: 10px;
}
.nav-list li a{
font-size:16px;
color:#3f3f44;
font-family: monospace;
}
To do this, you should break the <img src="logo.png" alt="" class="logo"> and <h3 class="logo-tittle">Company</h3> into 2 div. Then, use float: left to make the 2 div in one row. After that, place the flex: 1 to parent of the 2 div. You will be able to use href working when you click on the logo or the name.
For more detail, see below sample code:
<html lang="en"><head>
<link rel="stylesheet" href="style.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
nav{
background-color: salmon;
}
.container{
padding: 15px 0;
background-color: #fdcb9e;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
margin: 0 auto;
}
.logo-block{
border:1px solid gold;
}
.logo-block-link{
display: flex;
border:1px solid black;
}
.logo{
width: 50px;
height: 50px;
}
.nav-list{
flex:1;
display: flex;
justify-content: space-between;
}
.logo-tittle{
font-size:20px;
color:#3f3f44;
text-transform: uppercase;
letter-spacing: 2px;
font-family: monospace;
margin-left: 10px;
}
.nav-list li a{
font-size:16px;
color:#3f3f44;
font-family: monospace;
}
</style>
</head>
<body>
<nav>
<div class="container">
<div style="flex: 1;">
<div class="logo-block" style="float: left;">
<a href="#" class="logo-block-link">
<img src="https://www.gravatar.com/avatar/7d821e531f911facf0f644c1e708dd99?s=32&d=identicon&r=PG" alt="" class="logo">
</a>
</div>
<div style="float: left;">
<a href="#">
<h3 class="logo-tittle">Company</h3>
</a>
</div>
<div style="clear: both;"></div>
</div>
<ul class="nav-list">
<li>About</li>
<li>Projects</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
" I want that href only works when I hover logo or name not whole box "
I recomend you do it in JS, for example you can activate link by adding attribute href with value. So for example:
<a>This is link </a>
You add attribute href='yourlink' by js and you get <a href='yourlink'>This is link </a> and it should works.
So in javaScript:
Aelement.setAttribute('href','yourlink');
I'm having some trouble making a nav menu and its sub menu to display via the pseudo checkbox toggle. I looked at some guides and tried some, but I'm not getting the result I wanted -- the menus does not appear when toggle the checkbox on.
https://codepen.io/UnorthodoxThing/pen/paMBQB
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Natural Pasta</title>
<link rel="stylesheet" type="text/css" href="style-index.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Gloria+Hallelujah|Gorditas|Lobster|Nunito|Shadows+Into+Light|Varela+Round" rel="stylesheet">
<body>
<div class="wrapper">
<!-- Top Menu-->
<img class="top-logo" src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="220px" height="220px">
<div class="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
<div class="dropdown-menu">
<input type="checkbox" id="A">
<label for="A">Menu</label>
<ul>
<li>Pastas To Go</li>
<li>Sauces To Go</li>
<li>
<div class="dropdown-readymeals">
<input type="checkbox" id="A-C">
<label for="A-C" style="font-size:10pt;">Ready Meals...</label>
<ul>
<li>Arancinis</li>
<li style="font-size:10pt;">Garlic Bread</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Find Us</li>
</ul>
</div>
</div>
<div class="banner">
<!--
<img src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="300px" height="300px">
-->
</div>
<div class="body-content">
<div class="specials-title"><h3>- SPECIALISING IN -</h3></div>
<div class="specials-content">
<div class="specials-boxes"><div class="specials-text"><h3>Freshly Hand Made Pastas</h3></div><div class="specials-img"><img src="freshlyhandmadepastas-1.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Pasta Meals</h3></div><div class="specials-img"><img src="gourmetpastameals-3.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Traditional Home Made Sauces</h3></div><div class="specials-img"><img src="traditionalhomemadesauces.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Variety of Filled Pastas</h3></div><div class="specials-img"><img src="varietyoffilledpastas-1.jpeg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Home Made Soups</h3></div><div class="specials-img"><img src="homemadesoups-2.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Rolls</h3></div><div class="specials-img"><img src="gourmetroles-1.jpg"></div></div>
</div>
</div>
<div class="footer">
<!--<div class="grid">-->
<div class="upper-footer-container">
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Follow Us</h4>
<ul class="social-networks">
<li class="flex-items"><img src="fb-icon.png"></img></li>
<li class="flex-items"><img src="instagram-icon.png"></img></div></li>
</ul>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Opening Hours</h4> <br>
<ul class="contact-details">
<li>Monday: 9am-5:30pm</li>
<li>Tuesday: 9am-5:30pm</li>
<li>Wednesday: 9am-5:30pm</li>
<li>Thursday: 9am-9pm</li>
<li>Friday: 9am-5:30pm</li>
<li>Saturday: 9am-5pm</li>
<li>Sunday: 10am-5pm</li>
</ul>
</div>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Contact Us</h4> <br>
<ul class="contact-details">
<li>Add.: 152 Bunnerong Rd, Eastgardens NSW 2036</li>
<li>No.: (02) 8347 1988</li>
<li>Email</li>
<br>
<li>Catering Available</li>
</ul>
</div>
</div>
<div class="lower-footer-container">NaturalPasta © 2018</div>
<!--/div>-->
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}
html {
height: 100%;
}
body {
min-height: 100%;
min-width: 100%;
}
.wrapper {
min-height: 100%;
width: 100%;
position: relative;
background: url("img/pasta-food-wallpaper-4.jpg") no-repeat;
background-size: 1350px 670px;
background-position: center;
background-attachment: fixed;
}
body {
height: 100%;
background: #ddd;
}
.nav {
height: 204px;
width: 100%;
margin: 0 auto; /* Centers navigation */
text-align: center;
text-transform: uppercase;
background: black;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-family: 'Gloria Hallelujah', cursive;
color: #ee6f20;
font-weight: bold;
font-size: 13pt;
}
.nav ul li {
height: 41px;
width: 125px;
background: #000;
}
.nav .dropdown-menu ul, .dropdown-menu .readymeals ul {
background: #000;
}
.nav a {
text-decoration: none;
color: #ee6f20;
}
.dropdown-menu ul li, .dropdown-readymeals ul li {
display: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.dropdown-menu ul {
position: absolute;
display: none;
}
input[type=checkbox] {
display: none;
}
input#A:checked ~ .dropdown-menu ul li {
display: block;
max-height: 100%;
}
input#A-C[type=checkbox]:checked ~ .dropdown-readymeals ul li {
display: block;
}
/*tbc */
.dropdown-menu ul li {
font-size: 11pt;
background: #000;
}
.nav ul {
list-style: none;
display: inherit;
}
.nav ul li, .nav ul ul, .nav ul ul li, .nav label {
cursor: pointer;
}
.top-logo {
margin: auto 0;
position: absolute;
left: 42%;
margin-top: -15px;
}
.body-content {
background-color: #000;
}
.specials-content {
position: relative;
display: flex;
flex-wrap: wrap;
color: orange;
justify-content: center;
}
.specials-title h3 {
width: 100%;
display: block;
margin-top: 0px;
padding-top: 75px;
color: #ee6f20;
}
.specials-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 35px 75px;
padding: 50px 100px;
/*adjust margin height-width*/
}
.specials-text, .specials-img {
padding: 35px;
display: flex;
align-items: center;
}
.specials-text h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #ee6f20;
}
.specials-img img {
width: 300px;
height: 300px;
border-radius: 25px 5px 25px 5px;
}
h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #eee;
}
.footer {
bottom: 280px;
padding: 150px;
width: 100%;
text-align: center;
background: rgb(0,0,0);
color: white;
font-family: sans-serif;
display: flex;
flex-flow: wrap;
}
.upper-footer-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
.footer-container-1 {
width: 250px;
display: block;
margin: 25px;
}
.social-networks {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.flex-items a img {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 25px;
}
.contact-details {
list-style: none;
font-family: 'ubuntu', sans-serif;
}
.lower-footer-container {
width: 100%;
justify-content: center;
display: flex;
flex-wrap: wrap;
margin-top: 45px;
}
Is it to do with the html? The CSS? What could be interfering from displaying the menu and its submenu? :/
Much appreciated for the long run.
(P.S. I have other source image used in here, though that should not conflict with what I'm trying to resolve.)
In your code the <ul> tag is the sibling of selector input#A
But you have written css code as if .dropdown-menu is the sibling of selector input#A. This is why your code at this particular point doesn't work.
You have to target <ul> when input#A is clicked. <ul> is the sibling of input#A.
Change the css code on line 81 as below
input#A:checked ~ ul li {
display: block;
max-height: 100%;
}
This code change will make your sub-menu visible when you click Menu as shown in below image.
i'm mentioning the fix only for this particular point. In your codepen i can see that you've made this same mistake in few other places. You have to fix it.
Hope this helps.
So I'm just trying to make a simple navbar and I just started playing around with flexbox. Why doesn't align-content work here? I can get justify-content to work but I just can't align vertically. Here's the code.
* {
margin: 0;
padding: 0;
}
#Navbar_Wrapper {
}
#Navbar {
width: 100%;
height: 300px;
background: darkslategray;
}
#Navbar_Content_Wrapper {
width: 100%;
display: flex;
list-style: none;
justify-content: center;
align-content: center;
}
#Navbar_Content_Wrapper li {
display: inline-block;
}
#Navbar_Content_Wrapper a {
color: white;
font: 16px normal Arial;
text-decoration: none;
padding: 5px 10px 5px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="CSS Files/Navbar.css"/>
</head>
<body>
<section id="Navbar_Wrapper">
<div id="Navbar">
<div id="Navbar_Content_Wrapper">
<div id="#Navbar_Content_Left">
<ul>
<li>Home</li>
<li>Forum</li>
<li>Search</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
Why on earth doesn't this center my items vertically? Please help me out because I'm just completely stumped as to why this isn't working. Even though its probably just something simple.
You have 2 problems here:
You're using the wrong property. align-content is for distributing space between multi-line flex items (eg. using flex-wrap: wrap). You're looking for the align-items property instead.
There's no extra space to distribute. The height is set on the flex container's parent element (#Navbar), not the flex container itself (#Navbar_Content_Wrapper). In other words, your flex container is only as tall as its contents.
http://jsfiddle.net/qdv54k6f/
This has nothing to do with flexboxes. Just set the line height to 300px and you're done. (Also works for non-flexboxes.)
* {
margin: 0;
padding: 0;
}
#Navbar_Wrapper {} #Navbar {
width: 100%;
height: 300px;
background: darkslategray;
}
#Navbar_Content_Wrapper {
width: 100%;
display: flex;
list-style: none;
justify-content: center;
align-content: center;
line-height: 300px;
}
#Navbar_Content_Wrapper li {
display: inline-block;
}
#Navbar_Content_Wrapper a {
color: white;
font: 16px normal Arial;
text-decoration: none;
padding: 5px 10px 5px 0px;
}
<section id="Navbar_Wrapper">
<div id="Navbar">
<div id="Navbar_Content_Wrapper">
<div id="#Navbar_Content_Left">
<ul>
<li>Home</li>
<li>Forum</li>
<li>Search</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</section>
Edit: or the height or course. Silly me.
* {
margin: 0;
padding: 0;
}
#Navbar_Wrapper {} #Navbar {
width: 100%;
height: 300px;
background: darkslategray;
}
#Navbar_Content_Wrapper {
width: 100%;
display: flex;
list-style: none;
justify-content: center;
align-content: center;
height: 300px;
align-items:center;
}
#Navbar_Content_Wrapper li {
display: inline-block;
}
#Navbar_Content_Wrapper a {
color: white;
font: 16px normal Arial;
text-decoration: none;
padding: 5px 10px 5px 0px;
}
<section id="Navbar_Wrapper">
<div id="Navbar">
<div id="Navbar_Content_Wrapper">
<div id="#Navbar_Content_Left">
<ul>
<li>Home</li>
<li>Forum</li>
<li>Search</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</section>