1

I have a navigation bar that I have used flex box to style. I have two <ul> elements and have a logo (an image) between them (I just used some picture online as an example). When I put try to change the height of the image in any way with a percentage, nothing happens. The parent of the image is the <nav> element, so shouldn't the value of the height of the image be relative to the nav?

Here is a codepen of the same code that I have embedded below: enter link description here

* { 
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, 
body {
    background-color: #fff;
    color: #555; 
}

/* Navigation */
nav {
    display: flex;
    border: 2px solid green;
}

nav img {
    width: 25%;
    height: 50%;
}

.main-nav-left {
    flex-basis: 30%;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.main-nav-right {
    flex-basis: 30%;
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
}
<html>
    <body class="home-page-body">
        <header>
            <nav>
                <ul class="main-nav-left">
                    <li>Home</li>
                    <li>Drinks</li>
                    <li>Food</li>
                </ul>
              
                <img src="https://cdn.pixabay.com/photo/2018/01/09/15/43/auto-3071895_1280.png" />

                <ul class="main-nav-right">
                    <li>Catering</li>
                    <li>Events</li>
                    <li>Contact Us</li>
                </ul>
            </nav>
        </header>
    </body>
</html>
Logan Phillips
  • 660
  • 2
  • 10
  • 23
  • the height of the `nav` is *auto* as it isn't specified... so, a percentage with respect to that is ambiguous actually - see explanation [here](https://stackoverflow.com/questions/40844543/flex-aligner-working-on-firefox-edge-not-on-chrome/40846619#40846619) – kukkuz Apr 07 '19 at 03:55

1 Answers1

0

you should set a height for parent of image 

.nav{
height:200px;
}
alex heydari
  • 41
  • 5