List type disappears

user_11672206 0
Viewed 62

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?

css html
3 Answers

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>

user_28020400

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>

user_135734440

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>

user_86203330
Related