CODEWITHSUNDEEP
htmlcss
Stackinnerflow
Stackinnerflow

Reputation: 9

How to target and hide a title with css

I'm trying to target a title, which is also a title. The word I want to hide is contact from the following html. There doesn't seem to be another way as even the ID is linked to the main menu so hiding it by ID would hide whole menu.

<div class="collapse navbar-collapse navbar-ex1-collapse">

  <ul id="menu" class="menu">
    <li id="menu-item-3530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3530 dropdown">
      <a title="Contact" href="https://4309.co.uk/contact/">Contact</a>
      <ul role="menu" class="dropdown-menu"></ul>
    </li>
  </ul>
  
</div>

Perhaps I have explained this poorly. If you look in mobile in the top left cornerhere, drop the drop down menu by toggling the hamburger icon, you will see three letters act, the end of the word contact how to get rid of that? In desktop the whole word appears below the logo. It's an item with children, and I've tried using higher tier selectors and applying them to the ID, such as ul li, but this doesn't work. Hiding the ID will hide the parent and the children, when I need to separate it from its children and hide it individually.

Upvotes: 0

Views: 2678

Answers (3)

riderken
riderken

Reputation: 99

Okay I checked, the "contact" you're talking about is under a span tag and it's on a different base level, so Imma answer your question on a conceptual basis:

So in order to hide that contact from that dropdown menu, all you'd have to do is change that element's color to the background color so it's invisible and stop the link from working using like no hover effects and removing the link from CSS using a media query of course so that it doesn't affect when browsed from other devices than mobile here's how to do it

link.href = '';

leave it blank and you are all set, It won't show you that link anymore or none can click when using mobile

As per your question now: you are seeing the "act" instead of "contact" because of no margin when in mobile view, so fix the margin first and then if you have access to the mainframe code, use the methods I said above and it would work I promise

Upvotes: 0

Danny Bullis
Danny Bullis

Reputation: 3199

There are some clever ways to hide text using CSS, although that's not the most ideal approach. This approach uses a clever combination of text indentation to achieve the end result. You could use the attribute selector to target any <a> tags where the title attribute is "Contact" as such:

a[title='Contact'] {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

As referenced in this post, which can offer some more ideas as well. Notably:

a[title='Contact'] { color: transparent; }

Upvotes: 1

Run_Script
Run_Script

Reputation: 2548

First of all you need to target the a element which has a title of Contact. In CSS, this can be done with the following selector:

a[title="Contact"]

Then, you need to hide the element. There are two options for doing this:

display: none;

visibility: hidden;

Here is a code snippet which demonstrates the first of these two methods (using the display property):

a[title="Contact"] {
  display: none;
}
<div class="collapse navbar-collapse navbar-ex1-collapse">

  <ul id="menu" class="menu">
    <li id="menu-item-3530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3530 dropdown">
      <a title="Contact" href="https://4309.co.uk/contact/">Contact</a>
      <ul role="menu" class="dropdown-menu"></ul>
    </li>
  </ul>
  
</div>

The bullet point is still there, so you can see that only the text Contact is being hidden, and not the li element. The CSS has targeted only the one element with that specific title.

Upvotes: 0

Related Questions