Html Question posted in
Some basic documentation can be found here.

Html – CSS to remove the hyperlink on a header of the page

I am new to CSS, I am working on an application where I want to remove/hide the hyperlink from the header of the webpage. I clicked on the "inspect element" on the header and found the below code-

<a class="app-header-horizontal-navbar__text" data-bind="text: link.text, attr: {
                        title: link.text,
                        href: link.url,
                        'aria-label': link.text
                    }" title="Careers &amp; MyHR" href="https://oracle.fa.ocs.oraclecloud.com/hcmUI/CandidateExperience/en/sites/CX_1" aria-label="Careers &amp; MyHR">Careers &amp; MyHR</a>

I want to apply CSS so that I can remove the hyperlink when we click on "Careers & My HR" on the page. I tried the below but it didnt work and the page is the same:

.app-header-horizontal-navbar__text .input-row [data-qa="Careers &amp; MyHR"]  {     display: none;
}.app-header-horizontal-navbar__text .input-row label[for^="Careers &amp; MyHR-"]   {
     display: none;
}
 
.candidate-links {
display: block;
margin: 60px auto 0;
visibility: hidden !important;
}

Can someone help ?

Tags:

2

Answers


  1. 0

    The class name you given for the element not matching with the CSS style definition.

    .app-header-horizontal-navbar__text – this is the className

    Try this CSS code:

    .app-header-horizontal-navbar__text {
       pointer-events: none;
}

    Or if you want to remove/hide entire element use this:

    .app-header-horizontal-navbar__text {
    display: block;
    margin: 60px auto 0;
    visibility: hidden !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search