CODEWITHSUNDEEP
htmlcss
BOGGspotter
BOGGspotter

Reputation: 3

How do I stretch the height of an element using CSS?

In my website I have made a nav bar with a picture on the left. I now have the problem that the text elements are at the bottom of the nav bar instead of stretched across it. Anyone know how I can solve it without changing the padding? e.g. by setting a dynamic padding or such?

.navbar {
  background-color: #e7e7e7;
}

.navbar-element {
  display: inline-block;
  color: #202020;
  padding: 10px;
  text-decoration: none;
}

.navbar-element:hover {
  color: #000000;
  background-color: #d0d0d0;
}

.navbar-element.active {
  color: #f0f0f0;
  background-color: #006000;
}

.navbar-element.active:hover {
  color: #ffffff;
  background-color: #007000;
}
<nav class="navbar">
  <a class="navbar-element" href="."><img class="logo-navbar" src="./img/logo-black.svg"></a>
  <a class="navbar-element active" href=".">Startseite</a>
  <a class="navbar-element" href="./about-us">Über uns</a>
  <a class="navbar-element" href="./shop">Shop</a>
</nav>

Screenshot of the current result:

enter image description here

Upvotes: 0

Views: 44

Answers (4)

Bhawesh Verma
Bhawesh Verma

Reputation: 35

Just add display: flex; in .navbar { background-color: #e7e7e7; display: flex; }. Hope this will give you expected result. Do let me know.

Upvotes: 0

Heretic Monkey
Heretic Monkey

Reputation: 12113

Flexbox is always the answer (except when it's the problem).

Adding display: flex to the navbar allows things to be spaced along the axes a bit more sanely.

Adding display: flex to the navbar-elements allows them to take up the remaining space.

Note I added an arbitrary size to the image because the URL pointed nowhere.

.navbar {
  background-color: #e7e7e7;
  display: flex;
}

.logo-navbar { height: 100px; width: 100px; }

.navbar-element {
  display: flex;
  color: #202020;
  padding: 10px;
  text-decoration: none;
  
}

.navbar-element:hover {
  color: #000000;
  background-color: #d0d0d0;
}

.navbar-element.active {
  color: #f0f0f0;
  background-color: #006000;
}

.navbar-element.active:hover {
  color: #ffffff;
  background-color: #007000;
}
<nav class="navbar">
  <a class="navbar-element" href="."><img class="logo-navbar" src="./img/logo-black.svg"></a>
  <a class="navbar-element active" href=".">Startseite</a>
  <a class="navbar-element" href="./about-us">Über uns</a>
  <a class="navbar-element" href="./shop">Shop</a>
</nav>

Upvotes: 0

zerbene
zerbene

Reputation: 1492

I can propose you this (for the logo, I add one and I give a size, but check this proposition with your own logo):

img{
  height: 50px; /*ADD*/
}

.navbar {
  background-color: #e7e7e7;
  display: flex; /*ADD*/
  align-items: center; /*ADD*/
}

.navbar-element {
  /*display: inline-block;*/
  color: #202020;
  padding: 10px;
  text-decoration: none;
}

.navbar-element:hover {
  color: #000000;
  background-color: #d0d0d0;
}

.navbar-element.active {
  color: #f0f0f0;
  background-color: #006000;
}

.navbar-element.active:hover {
  color: #ffffff;
  background-color: #007000;
}
<nav class="navbar">
  <a class="navbar-element" href="."><img class="logo-navbar" src="http://www.bardfieldacademy.org/wp-content/uploads/2016/08/00106-3D-company-logos-design-free-logo-online-02.png"></a>
  <a class="navbar-element active" href=".">Startseite</a>
  <a class="navbar-element" href="./about-us">Über uns</a>
  <a class="navbar-element" href="./shop">Shop</a>
</nav>

Upvotes: 1

Love2Code
Love2Code

Reputation: 470

I wrapped your links in a div and then set it to space around the content. Let me know if this works for you.

.navbar {
  background-color: #e7e7e7;
}

.navbar-element {
  display: inline-block;
  
  color: #202020;
  padding: 10px;
  text-decoration: none;
}
.links {
width:100%;
height:fit-content;
display:inline-flex;
align-items:center;
justify-content:space-around;
}
.navbar-element:hover {
  color: #000000;
  background-color: #d0d0d0;
}

.navbar-element.active {
  color: #f0f0f0;
  background-color: #006000;
}

.navbar-element.active:hover {
  color: #ffffff;
  background-color: #007000;
}
<nav class="navbar">
<div class = "links">
  <a class="navbar-element" href="."><img class="logo-navbar" src="./img/logo-black.svg"></a>
  <a class="navbar-element active" href=".">Startseite</a>
  <a class="navbar-element" href="./about-us">Über uns</a>
  <a class="navbar-element" href="./shop">Shop</a>
  </div>
</nav>

Upvotes: 0

Related Questions