Centering Cloud Icon to Middle Right of Nav Border Background

Question

Centering Cloud Icon to Middle Right of Nav Border Background

26 Views Asked by iliketocode alot At 21 March 2024 at 02:54

I'm building a vertical navigation bar and want to add a cloud icon centered at the right border, directly on the background line.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="cloud-icon">
    <svg>...</svg>
  </div>
</nav>

This is the code-pen example. I tried really hard to get this work so any and all feedback would be appreciated.

I've tried to do this with flex-box, css-grid and margins and honestly am quite stuck just getting it to be positioned and stick to the right, let alone be mobile-responsive.

Original Q&A

There are 1 best solutions below

**Liap** · Answer 1 · 2024-03-21T03:16:41.500000

I edited the svg view box to make it centered

:root {
  --beige: #d9d9d9;
}

.contents {
  height: 100vh;
  width: 115%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
}

body {
  margin: 0;
}

nav {
  background-color: var(--beige);
  width: 50%;
  display: flex;
}

nav ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

nav li {
  padding: 3%;
}

nav a {
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 11px;
}

.cloud {
  grid-column: 2;
  align-self: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav>
    <div class="contents">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <span class="cloud">
        
<svg width="132" height="60" viewBox="127.037 138.437 123.778 64.061" xmlns="http://www.w3.org/2000/svg">
  <path d="M 238.358 176.764 C 236.657 179.93 233.537 182.461 229.622 183.849 C 225.707 185.238 221.287 185.382 217.246 184.252 L 216.805 184.121 C 214.807 183.557 213.071 182.515 211.827 181.134 C 210.583 179.752 209.892 178.097 209.845 176.389 C 209.851 175.101 210.242 173.832 210.985 172.692 C 211.729 171.551 212.802 170.572 214.114 169.837 C 214.538 169.602 214.846 169.253 214.981 168.852 C 215.117 168.451 215.073 168.024 214.856 167.647 C 214.67 167.34 214.384 167.081 214.028 166.896 C 213.672 166.711 213.261 166.608 212.838 166.599 C 212.425 166.599 212.022 166.697 211.678 166.88 C 209.859 167.899 208.354 169.24 207.276 170.801 C 206.199 172.361 205.577 174.1 205.46 175.884 C 205.379 178.154 206.104 180.395 207.552 182.342 C 208.999 184.29 211.107 185.862 213.627 186.873 C 212.264 189.048 210.205 190.889 207.664 192.205 C 205.122 193.522 202.191 194.266 199.173 194.361 C 197.476 194.407 195.791 194.104 194.278 193.482 C 192.765 192.86 191.472 191.939 190.519 190.804 C 190.308 190.565 190.03 190.369 189.708 190.232 C 189.385 190.096 189.028 190.022 188.663 190.018 C 188.303 190.032 187.952 190.114 187.638 190.257 C 187.324 190.4 187.055 190.6 186.854 190.842 C 185.012 193.329 182.069 195.16 178.618 195.965 C 175.168 196.769 171.468 196.487 168.266 195.174 C 165.064 193.862 162.598 191.618 161.367 188.896 C 160.136 186.174 160.232 183.176 161.635 180.508 C 162.29 178.927 163.634 177.592 165.418 176.752 C 167.202 175.911 169.304 175.623 171.333 175.94 C 173.416 176.327 175.236 177.346 176.414 178.786 C 176.699 179.071 177.082 179.283 177.515 179.394 C 177.948 179.505 178.413 179.512 178.85 179.412 C 179.287 179.312 179.679 179.111 179.976 178.833 C 180.273 178.556 180.462 178.214 180.52 177.85 C 180.521 177.552 180.416 177.26 180.219 177.008 C 179.043 175.502 177.398 174.272 175.45 173.439 C 173.502 172.607 171.316 172.2 169.113 172.261 C 166.909 172.322 164.764 172.847 162.89 173.785 C 161.016 174.723 159.48 176.04 158.433 177.607 C 156.666 180.278 155.954 183.322 156.392 186.33 C 152.473 186.747 148.489 186.189 144.974 184.731 C 141.458 183.272 138.578 180.983 136.718 178.168 C 135.866 176.895 135.397 175.477 135.349 174.031 C 137.943 174.637 140.698 174.622 143.281 173.987 C 145.864 173.352 148.162 172.125 149.896 170.455 C 151.056 169.18 152.686 168.235 154.554 167.754 C 156.421 167.273 158.429 167.282 160.289 167.778 C 160.619 167.859 160.967 167.875 161.306 167.826 C 161.644 167.778 161.964 167.665 162.238 167.497 C 162.514 167.33 162.735 167.112 162.885 166.861 C 163.034 166.61 163.107 166.334 163.097 166.056 C 163.014 163.528 163.809 161.031 165.392 158.848 C 166.974 156.665 169.281 154.882 172.052 153.701 C 173.237 153.196 174.536 152.889 175.872 152.799 C 177.207 152.709 178.552 152.837 179.824 153.177 C 179.824 153.42 179.639 153.626 179.569 153.85 C 178.811 156.349 179.088 158.979 180.358 161.338 C 181.29 163.093 182.746 164.633 184.596 165.822 C 186.446 167.011 188.633 167.812 190.96 168.153 C 191.816 168.287 192.686 168.356 193.559 168.358 C 196.505 168.334 199.373 167.584 201.777 166.209 C 204.182 164.834 206.009 162.9 207.015 160.665 C 207.117 160.424 207.152 160.168 207.12 159.915 C 207.087 159.661 206.987 159.417 206.826 159.198 C 206.665 158.979 206.447 158.791 206.187 158.647 C 205.927 158.502 205.632 158.405 205.321 158.362 C 204.812 158.306 204.295 158.388 203.85 158.594 C 203.405 158.801 203.057 159.121 202.862 159.504 C 202.158 161.026 200.885 162.334 199.219 163.248 C 198.084 163.885 196.797 164.324 195.44 164.54 C 194.084 164.755 192.686 164.74 191.337 164.498 C 189.987 164.255 188.715 163.789 187.6 163.129 C 186.485 162.469 185.551 161.63 184.859 160.665 C 183.57 158.411 183.339 155.857 184.209 153.476 L 184.557 152.746 C 185.903 149.933 188.362 147.556 191.552 145.985 C 194.742 144.414 198.485 143.736 202.201 144.056 C 205.918 144.376 209.399 145.676 212.107 147.755 C 214.814 149.833 216.596 152.575 217.176 155.554 C 217.289 155.98 217.583 156.36 218.006 156.63 C 218.43 156.9 218.957 157.043 219.496 157.033 C 223.003 156.986 226.483 157.541 229.704 158.662 C 233.809 160.152 237.021 162.889 238.641 166.278 C 240.261 169.667 240.159 173.435 238.358 176.764 Z" fill="black" transform="matrix(1, 0, 0, 1, -3.552713678800501e-15, -3.552713678800501e-15)"/>
</svg>
      </span>
</body>

</html>

You can use this https://boxy-svg.com/app tool to edit svg easily by

pasting the SVG
adjust the Default view
Export to SVG

Centering Cloud Icon to Middle Right of Nav Border Background

There are 1 best solutions below

Related Questions in CSS

Related Questions in FLEXBOX

Related Questions in RESPONSIVE-DESIGN

Trending Questions

Popular # Hahtags

Popular Questions