Unwanted underline shows up on my header's link when I move the mouse over it

remove line in header word 2016
how do i remove a vertical line in word
vertical line in word document that won't go away

On my website my header is linked back to itself and works fine, but when I put my mouse over it, an unwanted underline shows up underneath it and I do not want that. I already set the header's text decoration to none so I am not sure how to fix this. My code is below.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
        body {
            margin: 0;

        }

        .Header {
            position: fixed;
            z-index:1;
            width: 100%;
            height: 70px;
            background-color: black;
            text-align: right;
        }

        .socialmedia {
            position: fixed;
            right: 100px;
            top: 35px;
            transform: translate(0, -50%);
            display: flex;
            /* add this */
            align-items: center;
            /* add this */
        }

        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }

        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }

        .img-fluid{
            width: inherit;
            height: 782px;
        }

        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.7s;
        }
    </style>
</head>

<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center; padding-top: 20px">Lunation Boards</h1></a>
        <style>
            a{text-decoration: none}
        </style>

    </a>
    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>

        </a>
    </div>
</div>

inspect anchor text decoration is located in a:hover , so add

a:hover{
text-decoration:none;
}

2 Ways to Remove the Horizontal Lines in the Header or Footer of , This article will show you how to get rid of it. Sometimes, you may find an unwanted horizontal line after you insert header or footer to your Word  How do I get rid of those unwanted automatic lines that appear in my word documents - they drive me crazy!!! I can't select them to delete them like I would an object or line that I added myself. They seem to pop up often when I create a line using underscore key then hard return.

you can either use:

a:hover{
    text-decoration:none;
}

or use an inline CSS to explicitly specify the text-decoration for that particular anchor element.

<a href="file:///C:/Noah's%20stuff/Home.html" style="text-decoration: none;"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center; padding-top: 20px">Lunation Boards</h1></a>

the snippet below uses the first suggestion as that would be better, however, the latter does work aswell.

snippet:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
        body {
            margin: 0;

        }

        .Header {
            position: fixed;
            z-index:1;
            width: 100%;
            height: 70px;
            background-color: black;
            text-align: right;
        }

        a:hover{
            text-decoration:none;
        }

        .socialmedia {
            position: fixed;
            right: 100px;
            top: 35px;
            transform: translate(0, -50%);
            display: flex;
            /* add this */
            align-items: center;
            /* add this */
        }

        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }

        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }

        .img-fluid{
            width: inherit;
            height: 782px;
        }

        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.7s;
        }
    </style>
</head>

<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/Home.html"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center; padding-top: 20px">Lunation Boards</h1></a>
    </a>
    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>

        </a>
    </div>
</div>

The Line that Won't Go Away (Microsoft Word), For instance, if you type three underlines on a new line, and then Press Ctrl+Q. The underline appears to not go away, but jumps up a line. Double click on the header to starting editing. On the “Home” tab, click on “More Options” button in the “Styles” group. Select “Clear Formatting” in the drop down list. After doing so, you will be able to remove the horizontal line in the header manually. Double click at the header again to stop editing.

There might be a CSS for hover specifically. try: a:hover {text-decoration:none;}

Troublesome Lines - Word FAQ site, Troubleshooting unwanted lines in Word documents. are related to spelling and grammar) or dotted text underlines, which indicate Hidden text. The If your mysterious line appears in the header or footer area, it may be a paragraph border  Unwanted underline shows up on my header's link when I move the mouse over it On my website my header is linked back to itself and works fine, but when I put my mouse over it, an unwanted underline shows up underneath it and I do not want that.

This CSS is what's creating the underline, and it comes from bootstrap

a:focus, a:hover {
    color: #014c8c;
    text-decoration: underline;
}

You can overwrite it by adding this to your CSS

.Header a:hover, .Header a:focus {
  text-decoration: none;
}

How to underline text in header or footer, Can anyone show or explain how to do this properly please? Many Thanks. This thread is locked. You can follow the question or vote as helpful,  Click in the content area, use Ctrl + A to select all then click ‘Delete’ on the keyboard If any of these steps moved the line, then you know where the line is – that is, it’s in the header, the footer or the content. You can then use Ctrl + Z to undo the delete and return your document contents.

You need to put your CSS styles before the HTML. Best place is inside one single style block at the top of your HTML. Your style tag currently is below the link and that's why it's not applied.

You can remove the underline on hover by styling the :hover state specifically. However note that it's not ideal for accessibility.

There are few other issues with your HTML and CSS. It's best practice to avoid inline styles inside of the HTML tags. And you've linked to your home page with a file:// protocol, use http:// as its a webpage. If you're linking to the default home page then you can just do /Home.html too.

You're missing the closing </body></html> tags also.

I've fixed those below as well.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
        body { margin:0 }

        .Header {
            position: fixed;
            z-index:1;
            width: 100%;
            height: 70px;
            background-color: black;
            text-align: right;
        }

        .socialmedia {
            position: fixed;
            right: 100px;
            top: 35px;
            transform: translate(0, -50%);
            display: flex;
            /* add this */
            align-items: center;
            /* add this */
        }

        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }

        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }

        .img-fluid{
            width: inherit;
            height: 782px;
        }

        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.7s;
        }

        .Header a:hover { text-decoration:none }

    </style>
</head>

<body>

<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center; padding-top: 20px">Lunation Boards</h1></a>

    </a>
    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>

        </a>
    </div>
</div>



</body>
</html>

How to Remove Underline, The problem is that you did not give the underline to the h1 element but instead to the parent a element. I want my links to have an underline if they are anything but the header area. The link below will show you the css if you don't mind checking the resources. You'll just end up being on spam lists… Hover the mouse over the top or bottom edge of any page until Word displays the white space arrows. Then, double-click the edge and Word will hide the header (and footer) and the white space. If

How to remove header line in Word document?, Then another Kutools for Word dialog pops up to inform you of the successful removing, click OK to close it. Now all header lines are removed from document  You can underline blank spaces by pressing Shift+Hyphen (-), but it is difficult to line up the underlines — if you are creating a fill-in form, for example. Also, if the AutoFormat option for changing underscore characters into border lines is turned on, pressing Shift+Hyphen (-) three or more times in a row will result in a line that extends the width of the paragraph, which may not be what you want.

How to Get Rid of the Header & Footer Line in Microsoft Word : Tech , I would like to underline the <h1> tag on every page with a dotted line. text-​decoration-style is available from CSS 3. I would rather use a css hack than add unnecessary elements if at all possible. We'll have to see some mark up also. The official Word blog discusses how to fix a tricky formatting problem in Word -- using a pre-defined heading style in a document but not have every instance show up in an automatically-generated

Underline <h1> tag - HTML & CSS, If I highlight the heading text and click the underline button, that it to say that unnecessary lines on unnecessary rows normally will screw up a  Drawing lines rarely cause problems in documents because usually they can be selected and deleted without issue. A drawing line is selected when you get the four-headed arrow shown below. Be aware that a drawing line may be anchored to the header or footer.

Comments
  • just add text-decoration: none; to the anchor tag in your css.
  • You want to change the css that affects links at a default status (if any of your css does that), from "name", to "name:link". Also, the order is "LoVe For HAte". So: a:link, a:visited, a:focus, a:hover, a:active.
  • The a:hover css fixed it
  • 'A' for snippet :D