CODEWITHSUNDEEP
htmlcss
Ballazx
Ballazx

Reputation: 579

List type disappears

I'm trying to create a dropdown menu.

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li id="mobile"><a href="#">Mobile</a></li>
</ul>

I want to hide the Mobile option on the desktop and show it only on smaller devices.

li#mobile {
    display: none;
}

@media screen and (max-width: 800px) {
    li#mobile {
        display: block;
    }
}

The problem is, that when the #mobile is visible, the disc is missing from the list only for this item. What is happening here and what's the solution?

Upvotes: 2

Views: 151

Answers (3)

s.kuznetsov
s.kuznetsov

Reputation: 15223

You can use display: revert in your media query.

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

li#mobile {
    display: none;
}

@media screen and (max-width: 800px) {
    li#mobile {
        display: revert;
    }
}
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li id="mobile"><a href="#">Mobile</a></li>
</ul>

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 273649

Do the opposite logic and you only need to set dispay:none

@media screen and (min-width:800px) {
  li#mobile {
    display: none;
  }
}
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li id="mobile"><a href="#">Mobile</a></li>
</ul>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115287

Don't use display:block use display:list-item

A single value of list-item will cause the element to behave like a list item. This can be used together with list-style-type and list-style-position.

li#mobile {
  display: none;
}

@media screen and (max-width:800px) {
  li#mobile {
    display: list-item;
  }
}
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li id="mobile"><a href="#">Mobile</a></li>
</ul>

Upvotes: 4

Related Questions