How can I get the width of an element in css

I’m trying to make a vertical navbar but I’ve ran into a little issue. When you click the hamburger menu I want it to open the navbar and then move the hamburger menu to just outside of the navbar. Here’s a respresentation of what I mean:

Not opened:

Opened:

I can accomplish this by using a fixed position but if the user has a smaller screen size then the hamburger menu may overlap the navbar as it’s being squished down. Is there a way to get the navbar width and then position the hamburger menu to that width + an offset? Do I have to use javascript to do this, if so, how?

The easiest way would be to have the hamburger as part of the nav so when the nav slides out the hamburger slides with it.

It’s hard to give an answer without seeing what you have got already and what are the constraints of your design.

I would avoid trying to do it with js because you want the elements to take note of their surroundings in a responsive environment and adjust automatically to the available width. However if you have controlled the nav properly you should be able to allow room for the nav to be moved as required even with js.

Again it all depends on what else is happening on the page.

Generally I let a left vertical nav slide out and on top of the hamburger (so you can’t see it) but include a close icon in the nav itself and avoid the issue altogether. :slight_smile:

If you have some code we can look at or a rough demo I’ll be back tomorrow.

Oops I completely forgot to include some code :sweat_smile: .

Here’s my HTML

<nav class="navbar">
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <ul>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </ul>
    </nav>

And here’s my CSS

.navbar {
  display: flex;
  height: 100vh;
  width: 10%;
  background-color: #add7f6;
}

.navbar ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.navbar ul p {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
  font-size: 1.5rem;
}

.toggle-button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  height: 30px;
  width: 35px;
}

.toggle-button .bar {
  height: 15%;
  width: 100%;
  border-radius: 5px;
  background-color: white;
}

I don’t have anything interactive with the navbar yet because I don’t know how to go about it.

Although this doesn’t address your issue,You need to change your html a tad…
The only <li> elements can be children of the <ul> element.

Always validate your code while developing. It will save compounding headaches.

1 Like

It all depends on whether your hamburger is moving with page content or whether you have it attached to the nav.

Here’s a simple experiment to just get an idea.

I just knocked that up in a few seconds so ignore any buggy behaviour for now. It’s just to see how your use case fits in with this.

Or a slightly more fleshed out version to test use case.

Could you explain what

transition: 0.5s ease;
pointer-events: none;

Does?

The transition rule creates an animated transition when certain properties change. If for example you move an element from one position to to another then it appears to slide into position rather than going immediately from one to the other.

pointer-events: none;

pointer events with a value of none stops the element being clicked or interfering with anything on the page. Imagine you had an element that covered all the content on the page and you could see the content under a faded background. Usually you would be unable to interact with the content underneath but pointer events will allow the element on top to not accept clicks or interaction and you can click elements underneath.

I used it in the above example because part of the fixed nav is still clinging to the left side of the page (although invisible) and I didn’t want it blocking any of the normal page content while it was inactive.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.