CODEWITHSUNDEEP
cssflexbox
Amaliodigital
Amaliodigital

Reputation: 105

Flexbox parent elements collapsed

I'm trying to get my logo and navigation menu bottoms aligned and also separated each one to the left and right (as if the logo was floated to the left and the nav items to the right) but I cant control the vertical alignment between them as the child elements keeps dissapearing down below and to see it I have to set overflow to visible on its parent.

I have been struggling with the parent containers trying to force heights but they keep collapsing and I can't find a solution to get them wrapping their child elements.

This is happening in desktop view: see @media (min-width: 1460px) at the end of the styles.

Could I get some help, please? Thanks ind advance.

/*------------------------- reset */
html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
}

ol,
ul {
    list-style: none;
}

img {
    width: 100%;
    height: auto;
}


/*-------------------- general styles  */

:root {
    --light-bg: rgba(0, 0, 0, .1);
    --main-bg-color: rgba(220, 220, 220, 0.8);
    --main-font: 'Lato', sans-serif;
    --title-bg: #555;
    --title-color: #fff;
    --title-font: "Poppins", sans-serif;
    --secondary-title-color: #444;
    --main-text-color: #444;
    --shadows: 0px 1px 15px rgba(0, 0, 0, .6);
    --hr: 1px solid rgba(0, 0, 0, .2);
}

body {
    background-color: var(--main-bg-color);
    color: #A1A1A1;
    font-family: var(--title-font);
    font-weight: 100;
    font-size: 0.9rem;
    letter-spacing: 1px;
    line-height: 1.3;
}

.container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

a {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
}

a:link {
    color: #778899;
}

a:visited {
    color: #778899;
}

a:focus {
    background: rgba(0, 0, 0, .3);
}

a:hover {
    color: #9aa6b1;
}

a:active {
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--title-font);
    color: var(--secondary-title-color);
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

h1 {
    color: var(--title-color);
    background-color: var(--title-bg);
    font-weight: 900;
    font-size: 1.5rem;
}

h2 {
    font-size: 1.5rem;
}


h3 {
    font-size: 1rem;
    text-align: left;
    padding: 20px 0;
}

p::first-letter,
li::first-letter {
    text-transform: uppercase;
}

/*---------------------------- HEADER  */
header {
    display: block;
    height: 120px;
    background-color: #fff;
    box-shadow: var(--shadows);
    width: 100%;
    position: relative;
    z-index: 999999;
}

.flex-container {
    overflow: hidden;
}

.logo {
}

.logo img {
    width: 250px;
    height: 100px;
    margin: 10px;
}


/* menu */
nav {
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
}

nav ul {
    margin: 0 -10px 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    top: 57px;
    position: relative;
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
    color: white;
    font-size: 1.3rem;
}

nav li a {
    display: block;
    padding: 20px 38px;
    border-bottom: var(--hr);
    text-decoration: none;
    color: darkseagreen;
    font-size: 1.3rem;
}

nav li a:hover,
nav .menu-btn:hover {
    background-color: #f4f4f4;
}

nav li a:hover {
    color: seagreen;
    font-size: 1.3rem;
}

/* menu icon */


.menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 25px 17px;
    position: relative;
    user-select: none;
    border: 1px solid #999;
    background-color: #b2bdcc;
    border-radius: 50%;
}

.menu-icon .navicon {
    background: #fff;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

.menu-icon .navicon:before,
.menu-icon .navicon:after {
    background: #fff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.menu-icon .navicon:before {
    top: 5px;
}

.menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

.menu-btn {
    display: none;
}

.menu-btn:checked ~ ul {
    max-height: 476px;
}

.menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
}

.menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
}

@media (min-width: 1460px) {

    .container {
        width: 80%;
    }

    .flex-container,
    nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .logo img{
        margin: 10px 0;
    }
    .logo {
        height: 120px;
    }

    /* menu */
    nav {
        display: flex;
        position: static;
        width: 70%;
    }
    
        nav ul {
     
        overflow: visible;
    }
    
    nav li{
        height: max-content;
    }

    nav li a {
        padding: 10px 20px;
        border-bottom: none;
        border-right: 1px solid #f4f4f4;
        margin: 0;
    }

    .menu-icon {
        display: none;
    }
}
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="title" content="">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="css/responsive-menu.css" rel="stylesheet" type="text/css">
</head>

<body>

    <header>
        <div class="container">
            <div class="flex-container">
                <div class="logo">
                    <img src="https://dummyimage.com/250x100/b2bdcc/fff.png" />
                </div>
                <nav>
                    <input class="menu-btn" type="checkbox" id="menu-btn" />
                    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
                    <ul>
                        <li><a href="#">menu 1</a></li>
                        <li><a href="#">menu 2</a></li>
                        <li><a href="#">menu 3</a></li>
                        <li><a href="#">menu 4</a></li>
                        <li><a href="#">menu 5</a></li>
                        <li><a href="#">menu 6</a></li>
                        <li><a href="#">menu 7</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <main>

    </main>
    <footer>

    </footer>
</body>

</html>

Upvotes: 3

Views: 594

Answers (1)

ReSedano
ReSedano

Reputation: 5060

To separate and bottom align logo & menu in min-width: 1460px, I worked only in your media query with these modifications (they are all commented):

@media (min-width: 1460px) {
        .container {
            width: 80%;
        }

        .flex-container,
        nav ul {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            max-height: none;  /*remove max-height:0 */
            top: 0; /* remove top:57px; */
            align-items: flex-end; /* This rule align your menu on bottom */
        }


        .logo img{
            margin: 10px 0;
        }
        .logo {
            height: 120px;
        }

        /* menu */
        nav {
            display: flex;
            position: static;
            /*width: 70%;*/
            width:auto;
            margin-left:auto; /* --> this rule put your nav on right */
        }

        /*nav ul {
            overflow: visible;  --> Removing max-height:0; this rule is not necessary 
        }*/

        nav li{
            height: max-content;
        }

        nav li a {
            padding: 10px 20px;
            border-bottom: none;
            border-right: 1px solid #f4f4f4;
            margin: 0;
        }

        .menu-icon {
            display: none;
        }
    }

This is the result. Hope it helps! :)

/*------------------------- reset */
html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
}

ol,
ul {
    list-style: none;
}

img {
    width: 100%;
    height: auto;
}


/*-------------------- general styles  */

:root {
    --light-bg: rgba(0, 0, 0, .1);
    --main-bg-color: rgba(220, 220, 220, 0.8);
    --main-font: 'Lato', sans-serif;
    --title-bg: #555;
    --title-color: #fff;
    --title-font: "Poppins", sans-serif;
    --secondary-title-color: #444;
    --main-text-color: #444;
    --shadows: 0px 1px 15px rgba(0, 0, 0, .6);
    --hr: 1px solid rgba(0, 0, 0, .2);
}

body {
    background-color: var(--main-bg-color);
    color: #A1A1A1;
    font-family: var(--title-font);
    font-weight: 100;
    font-size: 0.9rem;
    letter-spacing: 1px;
    line-height: 1.3;
}

.container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

a {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
}

a:link {
    color: #778899;
}

a:visited {
    color: #778899;
}

a:focus {
    background: rgba(0, 0, 0, .3);
}

a:hover {
    color: #9aa6b1;
}

a:active {
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--title-font);
    color: var(--secondary-title-color);
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

h1 {
    color: var(--title-color);
    background-color: var(--title-bg);
    font-weight: 900;
    font-size: 1.5rem;
}

h2 {
    font-size: 1.5rem;
}


h3 {
    font-size: 1rem;
    text-align: left;
    padding: 20px 0;
}

p::first-letter,
li::first-letter {
    text-transform: uppercase;
}

/*---------------------------- HEADER  */
header {
    display: block;
    height: 120px;
    background-color: #fff;
    box-shadow: var(--shadows);
    width: 100%;
    position: relative;
    z-index: 999999;
}

.flex-container {
    overflow: hidden;
}

.logo {
}

.logo img {
    width: 250px;
    height: 100px;
    margin: 10px;
}


/* menu */
nav {
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
}

nav ul {
    margin: 0 -10px 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    top: 57px;
    position: relative;
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
    color: white;
    font-size: 1.3rem;
}

nav li a {
    display: block;
    padding: 20px 38px;
    border-bottom: var(--hr);
    text-decoration: none;
    color: darkseagreen;
    font-size: 1.3rem;
}

nav li a:hover,
nav .menu-btn:hover {
    background-color: #f4f4f4;
}

nav li a:hover {
    color: seagreen;
    font-size: 1.3rem;
}

/* menu icon */


.menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 25px 17px;
    position: relative;
    user-select: none;
    border: 1px solid #999;
    background-color: #b2bdcc;
    border-radius: 50%;
}

.menu-icon .navicon {
    background: #fff;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

.menu-icon .navicon:before,
.menu-icon .navicon:after {
    background: #fff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.menu-icon .navicon:before {
    top: 5px;
}

.menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

.menu-btn {
    display: none;
}

.menu-btn:checked ~ ul {
    max-height: 476px;
}

.menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
}

.menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
}

@media (min-width: 1460px) {

    .container {
        width: 80%;
    }

    .flex-container,
    nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        max-height: none;  /*remove max-height:0 */
        top: 0; /* remove top:57px; */
        align-items: flex-end; /* This rule align your menu on bottom */
    }


    .logo img{
        margin: 10px 0;
    }
    .logo {
        height: 120px;
    }

    /* menu */
    nav {
        display: flex;
        position: static;
        /*width: 70%;*/
        width:auto;
        margin-left:auto; /* --> this rule put your nav on right */
    }

    /*nav ul {
        overflow: visible;  --> Removing max-height:0; this rule is not necessary 
    }*/

    nav li{
        height: max-content;
    }

    nav li a {
        padding: 10px 20px;
        border-bottom: none;
        border-right: 1px solid #f4f4f4;
        margin: 0;
    }

    .menu-icon {
        display: none;
    }
}
<header>
        <div class="container">
            <div class="flex-container">
                <div class="logo">
                    <img src="https://dummyimage.com/250x100/b2bdcc/fff.png" />
                </div>
                <nav>
                    <input class="menu-btn" type="checkbox" id="menu-btn" />
                    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
                    <ul>
                        <li><a href="#">menu 1</a></li>
                        <li><a href="#">menu 2</a></li>
                        <li><a href="#">menu 3</a></li>
                        <li><a href="#">menu 4</a></li>
                        <li><a href="#">menu 5</a></li>
                        <li><a href="#">menu 6</a></li>
                        <li><a href="#">menu 7</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <main>

    </main>
    <footer>

    </footer>

Upvotes: 1

Related Questions