0

I'm replacing the Bartik menu with a custom one. To do this, I'm building a custom block and placing it appropriately.

That all works. However, I am having issues with Text Decoration: No matter what I try, I cannot remove the line from under links, and I have also noticed a "Doubled/offset" text look. When I edit the code on 'Tryit', everything looks fine; when I unclick 'source' in the block editor, everything also looks fine.

When I update the page, I see these issues.

My entire block code is the following one.

<style type="text/css">body {margin:0;}
    ul.topnav {
      font-weight: normal;
      text_decoration: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    ul.topnav li {
      display: inline-block;
    }

    ul.topnav li a {
      display: inline-block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      transition: 0.3s;
      font-size: 17px;
    }       

   ul.topnav li a:hover {background-color: #555;}

   ul.topnav li.icon {display: none;}

   @media screen and (max-width:680px) {
     ul.topnav li {display: none;}
     ul.topnav li.icon {
        display: inline-block;
      }
    }

    @media screen and (max-width:680px) {
      ul.topnav.responsive {position: relative;}
      ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      ul.topnav.responsive li {
        float: none;
        display: inline;
      }
      ul.topnav.responsive li a {
        display: block;
        text-align: left;
      }
    }
    </style>
    <ul class="topnav" id="myTopnav">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="#extra">Extra</a></li>
        <li class="icon"><a href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;">☰ Menu ☰</a></li>
    </ul>
    <script>
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }
    </script>

Here is an image of the issue:

Menu Issue

Notice both the underline, and the 'Doubled text'? Thats what Im trying to get rid of. Thank you in advance.

  • you have a typo "text_decoration: none;" – user21641 Nov 1 '16 at 11:28
  • Thank you for catching that, I fixed the code but the issue still persists. – Louie Nov 1 '16 at 17:37
0

For the text-decoration, try to use !important attribute.

For that "doubled text", you need to use text-shadow: none.

If text-decoration still doesn't work, you can try border-bottom: none for that line, too.

  • Thank you, I figured it out yesterday with help from the Drupal Community, The issue was the page CSS overriding my code. To fix it I did exactly what you sugest, I used text-shadow: none; & border-bottom: none; Thank you. – Louie Nov 5 '16 at 2:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.