I've been working on my portfolio and I came across this video where you hover the navigation links and they make an upward transition. YouTube Video
The css overflow method which I've applied according to the video that will remove duplicate navlinks (About me, Tools etc.) but this isn't working for me and I can't figure out why.
Relevant HTMl:
<!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>Protfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
<div class="space1">
<div class="centered-content nav-logo">Logo</div>
<div class="centered-content empty-space1">
<!--empty space-->
</div>
</div>
<div class="space2">
<div class="centered-content empty-space2">
<!--empty space-->
</div>
<div class="centered-content nav-links">
<ul class="centered-content">
<li>
<a href="">
<span>About Me</span>
<span>About Me</span>
</a>
</li>
<li>
<a href="">
<span> Contact</span>
<span> Contact</span>
</a>
</li>
<li>
<a href="">
<span>Blog</span>
<span>Blog</span>
</a>
</li>
<li>
<a href="">
<span>Projects</span>
<span>Projects</span>
</a>
</li>
<li>
<a href="">
<span>Tools</span>
<span>Tools</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="intro-container">
<div class="intro-para">
<h1>Greetings All!!</h1>
Intro-content</div>
<div class="centered-content intro-image">
the image goes
</div>
</div>
</body>
</html>
Relevant CSS:
/* ADDITION */
.centered-content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* END */
* {
box-sizing: border-box;
margin: 0%;
padding: 0%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
background-color:peachpuff;
font-family: roboto;
background-repeat: space;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nav {
display: flex;
height: 10vh;
background-color: crimson;
}
.space1 {
justify-content: center;
align-items: center;
display: flex;
width: 50%;
}
.nav-logo {
display: flex;
width: 50%;
height: 100%;
}
.empty-space1 {
display: flex;
width: 50%;
height: 100%;
}
.space2 {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
align-items: center;
}
.empty-space2 {
display: flex;
width: 50%;
height: 100%;
}
.nav-links {
display: flex;
width: 50%;
height: 100%;
}
.nav-links ul {
display: inline-flex;
list-style: none;
/* REMOVED! */
/* height: 100%; */
}
.nav-links ul li{
position: relative;
}
.nav-links ul li a {
position: relative;
display: block;
justify-content: space-evenly;
text-decoration:none;
margin: 0 .4em;
color: black;
overflow: hidden;
letter-spacing: 2px;
}
.nav-links ul li a span{
display: flex;
width: 100%;
position: relative;
transition: 0.5s;
background-color: lightslategrey;
justify-content: center;
align-items: center;
transition: 0.5s;
flex-direction: column;
}
.nav-links ul li a:hover span{
}
.intro-container{
display: flex;
padding: .2% .3% 0 .3% ;
}
.intro-para{
background-color:salmon;
width: 50%;
}
.intro-image{
width: 50%;
background-color: lightskyblue;
}
Your element should have a height. You have not provided height or max-height attribute for the .nav-links ul li a selector as given in the Youtube video link you provided.
Related
I'm trying to build a blog web page in a HTML CSS tutorial and I can't find a way to make the navBar identical.
Here's the Navigation Bar:
I don't know how to separate the logo on the left to the group of icons on the right.
I tried to use Flex but I can't figure out how to use it properly.
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
If you have any advice or suggestions it would be great I'm starting and this is making me struggle a lot.
Thanks in advance guys!
You just have to use display: flex; align-items: center; with header style which will look like
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
and also need to add CSS in Nav style, which will look like
header nav{
margin-left: auto;
display: flex;
align-items: center;
}
Complete code
header img{
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
header nav{
margin-left: auto;
display: flex;
align-items: center;
}
body{
background-color: aliceblue;
}
header * {
display: inline;
}
header li{
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My blog</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<header>
<img src="https://assets.hongkiat.com/uploads/psd-text-svg/logo-example.jpg" alt="">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li><div id="circle"></div></li>
</ul>
</nav>
</header>
</body>
</html>
You can use display: flex on the header (vertical alignment via align-items as desired), and to move the logo and the navigation to the left and right, just add margin-left: auto to nav to move it as far right as its contents allow.
(margin-right: auto for the logo would accomplish the same result, BTW)
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
nav {
margin-left: auto;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
You can do it with Flex, give your main div the display: flex and justify-content: space-between so there will be a space between your logo and other nav-items and then align-items: center so every item will be in the same horizontally aligned.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
Css
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
display: flex;
justify-content: space-between;
align-items: center
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mountains</title>
<link rel="stylesheet" href="/css/style.css">
<style>
/*css stylization*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header{
justify-content: space-between;
align-items: center;
display: flex;
padding: 10px 50px;
}
.logoname{
margin-bottom: 10px;
}
.logo img{
height: 50px;
width: 50px;
cursor: pointer;
}
.navlinks{
list-style-type: none;
}
.navlinks li{
display: inline-block;
padding: 20px;
}
.navlinks li a{
transition: all 0.3s ease 0s;
text-decoration: none;
font-family: roboto;
}
.navlinks li a:hover{
color: aquamarine;
}
/*hero image code*/
.herobanner {
background-image:url(/image/herobanner.jpg);
width: 100%;
}
.herotext {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
</style>
</head>
<body>
<header>
<figure class="logo">
<img src="\image/logo.png" alt="logo">
</figure>
<nav>
<ul class="navlinks">
<li>HOME</li>
<li>ABOUT US</li>
<li>GALERY</li>
</ul>
</nav>
</header>
<div class="herobanner">
<span class="herotext">
<h1>LIVE HIGH</h1>
</span>
</div>
</body>
</html>
I have made a simple navigation bar and under it I want to put a hero banner under it, the image URL does not work and the image does not get displayed but the text gets centered as the code for class='herotext' works properly.
please help me out with the code. Thanks to everyone who took their time out to help me.
The hero div has no content inside it which means the height is ZERO(The span positioned absolute so its height will not calculated), just add a 'min-height' and it will work:
/*css stylization*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
header {
justify-content: space-between;
align-items: center;
display: flex;
padding: 10px 50px;
}
.logoname {
margin-bottom: 10px;
}
.logo img {
height: 50px;
width: 50px;
cursor: pointer;
}
.navlinks {
list-style-type: none;
}
.navlinks li {
display: inline-block;
padding: 20px;
}
.navlinks li a {
transition: all 0.3s ease 0s;
text-decoration: none;
font-family: roboto;
}
.navlinks li a:hover {
color: aquamarine;
}
/*hero image code*/
.herobanner {
background-image: url(https://www.artonicweb.com/learn/wp-content/uploads/2018/05/12-HERO-IMAGES-1024x536.jpg);
width: 100%;
min-height: 500px;
}
.herotext {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mountains</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<figure class="logo">
<img src="\image/logo.png" alt="logo">
</figure>
<nav>
<ul class="navlinks">
<li>HOME</li>
<li>ABOUT US</li>
<li>GALERY</li>
</ul>
</nav>
</header>
<div class="herobanner">
<span class="herotext">
<h1>LIVE HIGH</h1>
</span>
</div>
</body>
</html>
**you just use this **
.herobanner {
background-image: url(https://cdn.pixabay.com/photo/2020/06/17/18/03/lights-5310589_960_720.jpg);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.herotext {
text-align: center;
position: relative;
color: #000;
}
I can see from your code that the .herobanner don't have any height because you defined the position of the span element inside it as absolute so you have several options to fix this either by removing the absolute position so the height of .herobanner will be based on the content or define a fixed height for it.
See the example below:
1st option
.herotext {
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
2nd option
.herobanner {
background-image:url(/image/herobanner.jpg);
background-size:cover;
background-repeat:no-repeat;
width: 100%;
height:20vh;
}
and repositon the span element so it fits inside it
i prefer the first solution so it will take the height of it's content.
codepen https://codepen.io/ahamdan/pen/OJXyWrv
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.
My code is as shown below:
xyz.scss
.menu-about {
display: none;
}
header {
display: none;
}
.container {
background-color: yellow;
width: 100%;
height: 100%;
}
#q-nav-about {
width: 100%;
height: 4rem;
position: fixed;
display: flex;
align-items: center;
top: 0;
background-color: white;
z-index: 3000;
.q-logo {
margin-left: 1rem;
width: 99px;
height: 50px;
}
ul {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.q-nav-about {
position: relative;
color: #898989;
text-decoration: none;
font-size: 18px;
font-family: $f3;
padding: 0rem 2rem 0rem 2rem;
}
ul li {
list-style: none;
}
.q-nav-work {
position: relative;
color: #898989;
font-size: 18px;
text-decoration: none;
font-family: $f3;
padding: 0rem 2rem 0rem 2rem;
}
.q-nav-contact {
position: relative;
color: #898989;
text-decoration: none;
font-size: 18px;
font-family: $f3;
padding: 0rem 8rem 0rem 2rem;
}
}
.r-contact-container {
margin-top: 4rem;
width: 100%;
height: 100% !important;
background-color: blue;
.row {
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
}
}
xyz.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.js" async></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<img class="mob-logo-about" src="../image/logo_logo.svg" alt="New york">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu-about">
<ul>
<a href="/template/about-us.html">
<li>About us</li>
</a>
<a href="#work">
<li>Products</li>
</a>
<a href="#contact-us">
<li>Contact</li>
</a>
</ul>
</div>
<div id="q-nav-about">
<img class="q-logo" src="../image/logo_logo.svg" alt="New york">
<ul>
<li><a class="q-nav-about " href="/template/xyz.html">xyz</a>
</li>
<li><a class="q-nav-work" href="#abx">abx</a>
</li>
<li><a class="q-nav-contact" href="#lll">lll</a>
</li>
</ul>
</div>
<div class="container r-contact-container">
<div class="row">
<div class="col-sm-8 no-padding">hdbdasjhdasdhjsda</div>
<div class="col-sm-4 no-padding">sdcdbcjdhhddahs</div>
</div>
</div>
</body>
</html>
My layout looks as shown below:
You need to add the below CSS:
html, body{
height:100%;
width:100%;
}
Then you can adjust the height of the r-contact-container.
.r-contact-container {
margin-top: 4rem;
width: 100%;
height: 86% !important;
background-color: blue;
}
This height can be adjusted, I have just used 86%.
JSFiddle Demo
You can use other unit of measure, you can try using:
height: 100vh.
"100vh" is 100% of height of window screen.