0

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.

2 Answers 2

0

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

.custom-logo-link {
    border:0,
}
1
  • Thank you very much for your help. By using the class named "custom-logo-link" I was able to resolve the issue, so I really appreciate your help. I couldn't have figured that out without you. I'll post the entire code I used separately, in case anyone else has a similar issue, but your help is what resolved the issue, so I gave you the green check. Thank you again very much.
    – John
    Mar 22 at 15:02
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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