css - Hyperlink Underline using Border-Bottom Showing Up Under Site Logo Image

admin管理员组

文章数量:1122832

I was underlining the hyperlinks on my Wordpress Genesis Theme using Border-Bottom in the CSS.

Basically, I did the CSS code below, which worked for all of my in-text links:

a {
    color: #03bf00;
        font-weight: bold;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #03bf00;
}

a:hover,
a:focus {
    color: #F12E2E;
        font-weight: bold;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #F12E2E;
}

Even though the underline did appear some places I didn't want it to, like in menu areas, I was able to remove that by using border-bottom: none;

However, a border line is now showing up under my site logo image in the header.

I would like to remove that line, but everything I've tried is not working.

Basically, when I inspect the logo element, it seems to indicate that I should adjust this piece of code.

.site-header .custom-logo-link .custom-logo

So I went through all of the code in the title area and added border-bottom: none; but it didn't remove the line underneath the logo.

.title-area {
    float: left;
    padding-bottom: 20px;
    padding-top: 20px;
}

.wp-custom-logo .title-area {
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    padding: 0;
    width: auto;
}

.site-title {
    display: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 0;
    margin-bottom: 0;
    text-transform: uppercase;
}

.site-title a,
.site-title a:hover,
.site-title a:focus {
    color: #fff;
    text-decoration: none;
}

.wp-custom-logo .site-title > a {
    float: left;
    min-height: 80px;
    width: 100%;
}

.wp-custom-logo .site-title {
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.site-description {
    display: none;
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    height: 0px;
    overflow: hidden;
    position: absolute !important;
    width: 0px;
    word-wrap: normal !important;
}

.site-header .custom-logo-link .custom-logo {
    height: 80px;
    width: auto;
}

I tried each of these class styles, but it didn't work.

I even tried adding border-bottom: none; in this area below, and it didn't work.

a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.gallery img,
.wp-custom-logo .site-title > a,
.wp-custom-logo .title-area,
.site-header {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

My site is /, and I basically want to remove the green line that appears below the logo, which turns reddish when you hover over the logo.

I was able to remove any errant lines from anywhere else using the border-bottom: none; attribute, but I can't get it to work for the line under the logo.

This is my first time here, so sorry if I am messing up or not following protocol.

Thank you for any help in advance.

I was underlining the hyperlinks on my Wordpress Genesis Theme using Border-Bottom in the CSS.

Basically, I did the CSS code below, which worked for all of my in-text links:

a {
    color: #03bf00;
        font-weight: bold;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #03bf00;
}

a:hover,
a:focus {
    color: #F12E2E;
        font-weight: bold;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #F12E2E;
}

Even though the underline did appear some places I didn't want it to, like in menu areas, I was able to remove that by using border-bottom: none;

However, a border line is now showing up under my site logo image in the header.

I would like to remove that line, but everything I've tried is not working.

Basically, when I inspect the logo element, it seems to indicate that I should adjust this piece of code.

.site-header .custom-logo-link .custom-logo

So I went through all of the code in the title area and added border-bottom: none; but it didn't remove the line underneath the logo.

.title-area {
    float: left;
    padding-bottom: 20px;
    padding-top: 20px;
}

.wp-custom-logo .title-area {
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    padding: 0;
    width: auto;
}

.site-title {
    display: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 0;
    margin-bottom: 0;
    text-transform: uppercase;
}

.site-title a,
.site-title a:hover,
.site-title a:focus {
    color: #fff;
    text-decoration: none;
}

.wp-custom-logo .site-title > a {
    float: left;
    min-height: 80px;
    width: 100%;
}

.wp-custom-logo .site-title {
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.site-description {
    display: none;
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    height: 0px;
    overflow: hidden;
    position: absolute !important;
    width: 0px;
    word-wrap: normal !important;
}

.site-header .custom-logo-link .custom-logo {
    height: 80px;
    width: auto;
}

I tried each of these class styles, but it didn't work.

I even tried adding border-bottom: none; in this area below, and it didn't work.

a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.gallery img,
.wp-custom-logo .site-title > a,
.wp-custom-logo .title-area,
.site-header {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

My site is https://www.maximizingmoney.com/, and I basically want to remove the green line that appears below the logo, which turns reddish when you hover over the logo.

I was able to remove any errant lines from anywhere else using the border-bottom: none; attribute, but I can't get it to work for the line under the logo.

This is my first time here, so sorry if I am messing up or not following protocol.

Thank you for any help in advance.

• css
• genesis-theme-framework
• logo

Share Improve this question asked Mar 22, 2024 at 0:06 JohnJohn 322 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Your Site Logo is surrounded by a class named "custom-logo-link". So try to add

.custom-logo-link {
    border:0;
}

Thanks to the help of the answer from Andre, I was able to resolve this issue.

Here is the full code that I used for future reference if anybody else has a similar issue.

.custom-logo-link,
.custom-logo-link:focus,
.custom-logo-link:hover {
    border-bottom: none;
}

Basically, using "border:0;" that Andre suggested did work (make sure to use ; instead of , I believe), but I used the "border-bottom: none;" attribute, and that worked as well.

Then, I just had to add the separate code for focus/hover to remove the line from appearing when hovering over the logo.

So the issue is resolved now. Thank you very much.

本文标签： cssHyperlink Underline using BorderBottom Showing Up Under Site Logo Image