How to hide menu element with only CSS

html css hide display

15,494

Solution 1

You only have to replace : with =, because that's how css selectors work (reference here)

Your code should look like this

<style>
    .nav a[title=Contact] {
        display: none;
    } 
</style>

Solution 2

Here, it works : See this fiddle

.nav a[title=Contact] {
        display: none;
    }

Solution 3

You can make use CSS nth-child selectors this way:

.nav li:nth-child(2) {
  display: none;
}

Or may provide a CSS class to that "Contact" list-item, and hide it with CSS:

HTML

<ul class="nav navbar-nav navbar-left">
  <li><a href="://www.example.com/" title="Home">Home</a></li>
  <li class="hide"><a href="://www.example.com/storepage.aspx" title="Contact">Contact</a></li>
  <li><a href="https://www.example.com/login" title="Login">Login</a></li>
</ul>

CSS

.hide {
  display: none;
}

.nav li:nth-child(2) {
  display: none;
}

.hide {
  display: none;
}

<h3>With CSS nth-child selector</h3>

<ul class="nav navbar-nav navbar-left">
  <li><a href="/www.example.com/" title="Home">Home</a></li>
  <li><a href="/www.example.com/storepage.aspx" title="Contact">Contact</a></li>
  <li><a href="https://www.example.com/login" title="Login">Login</a></li>
</ul>

<h3>With CSS classes</h3>

<ul class="nav navbar-nav navbar-left">
  <li><a href="/www.example.com/" title="Home">Home</a></li>
  <li class="hide"><a href="/www.example.com/storepage.aspx" title="Contact">Contact</a></li>
  <li><a href="https://www.example.com/login" title="Login">Login</a></li>
</ul>

EDIT: Note that the below CSS will hide only the hyperlink, not the list-item:

.nav a[title=Contact] {
  display: none;
}

Cheers!

15,494

Author by

Andy

Student by day, student by night.

Updated on June 04, 2022

Comments

Andy almost 2 years
I have these menu elements I am trying to hide but I cannot seem to only select the middle option called 'Contact'. I cannot edit the html directly so am using CSS to override the style.

Essentially I just want to hide the item called 'Contact' from appearing. How do I select it using CSS? I have put what I thought might work in the section, but it's not really working. Any help would be greatly appreciated. Thanks in advance. (Here it is as well: https://jsfiddle.net/amhzv0Lw/4/)

Here's the menu code:
```
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .nav a[title:contact] {
        display: none;
    } 
    </style>
    </head>
    <body>

    <ul class="nav navbar-nav navbar-left">
<li><a href="/www.example.com/" title="Home">Home</a></li>
<li><a href="/www.example.com/storepage.aspx" title="Contact">Contact</a></li>
<li><a href="https://www.example.com/login" title="Login">Login</a></li>



    </ul>

    </body>
    </html>
```