CODEWITHSUNDEEP
cssflexbox
INT
INT

Reputation: 912

Same width as height on a flex child element

I'm working on a navbar where I will have a burger menu for toggling an extended menu.

I want to avoid to explicitly set a width to the burger menu element (.extendedMenu__toggle) and have it scale based on the font-size set on .header if possible.

The element gets it height from the parent as it's flex, but not sure how I can translate that into a proper width property so that I get a perfect square.

html {
  font-size: 62.5%;
}

html, body {
  font-family: helvetica;
  line-height: 1.45;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  font-size: 1.3rem;
  font-weight: bold;
}

.nav {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
  margin: 1rem;
}

.extendedMenu__toggle {
  /*width: 37px;
  height: 37px;*/
  background: red;
}

.navLink {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border: 2px solid;
  border-radius: 30px;
  margin-left: 0.75rem;
  text-transform: uppercase;
}

.navLink:first-child {
  margin-left: 0;
}
<header class="header" role="banner">
  <nav class="nav">
    <div class="extendedMenu__toggle">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <a class="navLink" href="#">Home</a>
    <a class="navLink" href="#">About</a>
    <a class="navLink" href="#">News</a>
  </nav>
</header>

Upvotes: 0

Views: 54

Answers (1)

Bryce Howitson
Bryce Howitson

Reputation: 7720

Option #1: Use Javascript. After the element renders you would check the height then set flex-basis to element height. I also set overflow: hidden since my content is "not square".

SO's code snippet seems not to like window.onload so here's a codepen example

html {
  font-size: 62.5%;
}

html, body {
  font-family: helvetica;
  line-height: 1.45;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  font-size: 4rem;
  font-weight: bold;
}

.nav {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
  margin: 1rem;
}

.extendedMenu__toggle {
  /*width: 37px;
  height: 37px;*/
  background: red;
  overflow:hidden;
}

.navLink {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border: 2px solid;
  border-radius: 30px;
  margin-left: 0.75rem;
  text-transform: uppercase;
}

.navLink:first-child {
  margin-left: 0;
}
<header class="header" role="banner">
  <nav class="nav">
    <div id="box" class="extendedMenu__toggle">
       menu
    </div>

    <a class="navLink" href="#">Home</a>
    <a class="navLink" href="#">About</a>
    <a class="navLink" href="#">News</a>
  </nav>
</header>

Option #2: Use an image. This is kinda hacky but a square image will try to retain its proportions long as it's rendered in the HTML. Here are a few ways, available:

  • place an image of the hamburger menu with a transparent background in HTML. (go large so you're not scaling up, just down).
  • place a 10px x 10px transparent image in HTML and absolutely position other content on top of it.
  • create a pseudo class with content: url(image.jpg); in the CSS then layer content above it.

The first is the easiest to show so I'm doing that one. I would add a max-height to the image so it doesn't get out of control.

html {
  font-size: 62.5%;
}

html, body {
  font-family: helvetica;
  line-height: 1.45;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  font-size: 4rem;
  font-weight: bold;
}

.nav {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
  margin: 1rem;
}

.extendedMenu__toggle {
  /*width: 37px;
  height: 37px;*/
  background: red;
}
.extendedMenu__toggle img {
  display:block;
  max-height: 6rem;
}

.navLink {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border: 2px solid;
  border-radius: 30px;
  margin-left: 0.75rem;
  text-transform: uppercase;
}

.navLink:first-child {
  margin-left: 0;
}
<header class="header" role="banner">
  <nav class="nav">
    <div class="extendedMenu__toggle">
       <img src="https://cdn1.imggmi.com/uploads/2018/10/15/e86f8a312edd60d643c8d80212b64dba-full.png" />
    </div>

    <a class="navLink" href="#">Home</a>
    <a class="navLink" href="#">About</a>
    <a class="navLink" href="#">News</a>
  </nav>
</header>

Upvotes: 1

Related Questions