CSS hamburger menu full width when open and in page link not working

[toolman]

Hi there,

I have this sticky/fixed hamburger menu that I have found, but I am having trouble setting the menu to 100% width once open.

I have tried setting #menu to width: 100%, but it’s not going full width.

Can anyone see why this is?

Also, I am wondering why the in-page link is not working/jumping down the page when clicking on the #about link.

Another thing, is it possible with CSS to collapse/hide the menu when a link is clicked? At the moment, it stays open after a link is clicked.

This is the fiddle I have:

Edit fiddle - JSFiddle - Code Playground

Thanks.

[coothead]

Hi there toolman,

as your example uses code like this…

   <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#about"><li>About</li></a>
      <a href="#"><li>Info</li></a>
      <a href="#"><li>Contact</li></a>
      <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a>
    </ul>

…I would suggest that you renew your search for a something else.

coothead

[toolman]

I can’t believe I didn’t spot that!

I’ve updated it to this:

Edit fiddle - JSFiddle - Code Playground

But I still can’t get the link to jump down the page or to get the ul to be full width

[Erik_J]

@toolman

But I still can’t get the link to jump down the page

Probably caused by the anchor name hash typo: “#about,” remove the # to make the name valid.

[toolman]

Ah, thank you

[Ray.H]

@toolman

I have tried setting #menu to width: 100% , but it’s not going full width .

Can anyone see why this is?

Well that’s because width:100% refers to the parent’s width.

The parent is your #menuToggle div. It is set to position:fixed without a width and it is a shrink to fit element.

Due to the fact that your using the checkbox hack it requires you to nest your UL in the #menuToggle div. That’s making things kinda janky (as Paul would say ).

A fix would be to use a vw value rather than percentage.

#menu
{
  position: absolute;
  width: 100vw; /*added this*/
  box-sizing:border-box; /*added this*/
  margin: 0;
  padding: 50px;
  padding-top: 125px;
  right:-100px;

  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(100%, 0);

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

Then adjust your right offset value when checked…

#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
  right:-50px; /*was -100px in unchecked state*/

}

menu.html (3.5 KB)

[toolman]

Hi,

That worked great, thank you very much. I didn’t think to use vw

Thanks again