CODEWITHSUNDEEP
csswordpress
user15111687
user15111687

Reputation: 1

How to make the mobile menu full width

I'm trying to get the mobile menu full width, but doesn't seem to succeed.

#menu-main-2 {
      background-color:#FFFFFF !important;
      padding-left:15px;
      max-width: unset;
      width: 100%;
}

mobile menu

Upvotes: 0

Views: 650

Answers (3)

Ossama
Ossama

Reputation: 75

If you want it to take full width you should try this:

#menu-main-2 
 {
  position: absolute;
  top: 2rem;
  right: 0;
  bottom: 0;
  left: 0;
 }

Upvotes: 0

ABlue
ABlue

Reputation: 673

you can use width:100vw

Viewport Width (vw) – A percentage of the full viewport width. 10vw will resolve to 10% of the current viewport width, or 48px on a phone that is 480px wide. The difference between % and vw is most similar to the difference between em and rem. A % length is relative to local context (containing element) width, while a vw length is relative to the full width of the browser window.

Upvotes: 1

Joe
Joe

Reputation: 948

It looks like it's already maximum width of its parent container? If you need it tight to edges you'll need to increase the containers width or position absolute the ul and then position relative the container.

If you want the main li in the ul to be horizontal across the top and only sub items to be drops then you'll need to flex the ul:

#menu-main-2 {
   display flex;
}

Upvotes: 1

Related Questions