Removing the Separation Borders in the Header

Essentially, I’m trying to put a border around the text

a: hover {border: 1px solid #ffffff; border-radius:100px}
a: active {border: 1px solid #ffffff; border-radius:100px}

However, the issue is I have to go into “Advanced Styling” to set up the border for the Main Menu Links, because the color overrides my Quick CSS. But, if it set it to white, then those vertical lines appear again. They appear on the left as you scroll through the header selections. I was wondering if I could somehow fix this so that only the border (and not these vertical lines appear)
Additionally, my active CSS isn’t working at all. The hover state works decently, but the active state is completely nonfunctional. I was wondering if you knew how to fix this.

Thank you

It works well now. Thank you very much.

I have a minor issue with opening the site up on a phone though (i’ve even cleared the cache). Nothing shows up in the header section. It’s just a black background, and the words do not show up until you click somewhere. I was wondering if you knew anything about this.

The code you provided worked excellently.

I am curious why custom CSS is necessary for this? This was something I changed in the settings within Enfold itself. I even tried taking out all custom CSS and it still was completely black on ONLY the mobile devices (the site worked fine on desktops). Strangely, if I had left the background a lighter color (like white), then the site worked fine on mobile devices. It’s just something about the color black and the mobile version of the site.

Thank you very much for your help, Mike. I really do appreciate you taking the time to help me.

My apologies. I have another question. I added a search box and ran into some complications. It seems that most of the problems come from the simple fact that I chose to reverse the colors (black background and white words). I figured out what Quick CSS was necessary to solve most of my problems. The Quick CSS is below.

.header_color .avia-tt {
background-color: #11a3bd;
}
.header_color .ajax_search_title {
color: #000000;
}
.header_color .ajax_search_excerpt {
color: #000000;
}
#searchform div input {
color: #000000 !important;
}

However, I ran into 3 problems I was wondering if you could help me with.
1) How do I change the outline of the search box? When I click on it, it has this rather thick border. I’d like to know how to edit the size of it (to make it smaller)
2) Once I click on the search icon, the search box opens below, but the SECONDARY search icon (magnifying glass) to the right of the search box is just a black square (the search icon doesn’t show up until I hover over it). The black background is black (likely mirroring the header). The search icon is black as well, and that’s why I can’t see it. I’d like to know how to edit this search icon and the background of it as well (or have the ability to take it out the secondary search icon)
3) The SECONDARY search icon opens up a new page if I click it. How do I control this (prevent this or be able to edit the contents the page that the search button opens up?

My apologies for the questions. I didn’t think a simple color reversal would cause this many complication, but I am learning quite a bit in the process, so I am very satisfied.

Can you explain the function of these lines of code? I don’t notice any changes.
#top .avia-search-tooltip input[type=”text”]::-moz-placeholder {
color: #000 !important;
}
#top .avia-search-tooltip input[type=”text”]:-ms-input-placeholder {
color: #000 !important;
}
.header_color .ajax_search_image {
color: #fff !important;
}

The code below doesn’t seem to be working for me. The margins are still thick for some reason.
.avia-search-tooltip #searchform>div {
margin: 0px !important;
}

1) There also is this strange effect when you click into the placeholder region. It shows some kind of error. I was wondering if that could be eliminated somehow.

2) How do I eliminate the “view all results tab at the bottom.” It effectively takes me to a search page again. The submit button no longer directs me, but the “view more results” does.

Thank you very much for the help, Mike. I couldn’t have done this without you.