Docs

[Joel]

In your Ethos theme, the menu links in the NavBar have a thin border I’d like to remove, similar to the Renew NavBar, I just like the mobile dropdown in Ethos better. Any help would be appreciated.

[Nabeel A]

Hi there,

Thanks for writing in! To remove the border, add the following CSS code via Appearance > Customize > Custom > CSS:

.x-navbar .desktop .x-nav>li>a {
border-left: none !important;
}
.x-navbar .desktop .x-nav>li:last-child>a {
border-right: none !important;
}

Let us know how this goes!

[Noli]

Hi there,

I’ve tried this to remove the thin grey outline around each menu item in the navbar without success, any other suggestion?
cheers

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Noli]

sure! here is the website i’m working on at the moment:
http://www.psychedelicbaglady.com/
Thank you for your time!

[Noli]

This reply has been marked as private.

[Paul R]

Hi Oli,

To remove the grey line, you can add this under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav>li>a>span,
.x-navbar .desktop .x-nav>li>a:hover>span {
    border:0;
}

Hope that helps.

[Noli]

Amazing!!!! Thank you so much!!

[Nico]

You’re most welcome.

Have a great day! 🙂

[Kirillborisov]

hey there!

I used this method and it worked, but after the last x-theme update menu links in the NavBar have a thin border I’d like to remove again.

The page : artcreators.ru

my css

@media ( max-width: 979px ) {
.x-slider-revolution-container.above {
display: none;
}
}
.admin-bar .x-navbar-fixed-top, .admin-bar .x-navbar-fixed-left, .admin-bar .x-navbar-fixed-right {
top: 0px;
}
.single-x-portfolio .entry-featured {
display: none;
}
.archive .x-navbar.x-navbar-fixed-top, 
.error404 .x-navbar.x-navbar-fixed-top, 
.category .x-navbar.x-navbar-fixed-top,
.tag .x-navbar.x-navbar-fixed-top,
.single-post .x-navbar.x-navbar-fixed-top,
.blog .x-navbar.x-navbar-fixed-top {
position: relative;
}
.single .entry-featured {
display: none;
}
@media (max-width: 1405px){
.x-navbar .x-nav>li>a {
letter-spacing: 1px;
}
}
@media (max-width: 1310px){
.x-navbar .x-nav>li>a {
letter-spacing: 0;
}
}
@media (max-width: 1220px){
.x-navbar .x-nav>li>a {
padding:30px .4em 0;
}
}
@media (max-width: 960px) {
.x-slider-revolution-container.above {
display: none !important;
}
}
@media (max-width: 977px) {
.x-slider-container.above {
display: none;
}
}
.x-btn-navbar {
margin-top: 11px;
}
body .x-btn:hover,
body .button, [type="submit"] {
-moz-box-shadow: none;
-webkit-box-shadow: none;
opacity: 1; text-shadow: none;
}
x-btn-small {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#rh-copy {
display:none !important;
}
div.one { font-size: 20px; color: #000000; }
p.intro { text-align: center; font-weight: bold; font-size: 35px; color: #333333; }
p.intro2 { text-align: center; font-size: 15px; margin-right: 10%; margin-left: 10%; }
p.upper { color: #000000; text-align: center; font-size: 35px; }
p.why { font-size: 15px; sans-serif; text-align: center; color: #3f3f3f; }
p.why1 { font-size: 15px; font-weight: bold; sans-serif; text-align: center; color: #3f3f3f; }
p.white1 { font-size: 20px; font-weight: bold; sans-serif; text-align: center;color: #ffffff; }
p.white { font-size: 15px; sans-serif; text-align: center; color: #ffffff; }
p.wed1 { font-size: 20px; font-weight: bold; sans-serif; text-align: center;color: #ffffff; }
p.wedwhy1 { font-size: 20px; font-weight: bold; sans-serif; text-align: center; color: #ffffff; }
p.wedwhy { font-size: 15px;  sans-serif; text-align: center; color: #ffffff; }
p.wedblack { font-size: 25px; font-weight: bold; text-align: center; color: #3f3f3f; }
h1.theone { 
color: #ffffff;
text-align: center;
font-weight: bold;
}
h2.theone { 
color: #ffffff;
text-align: center;
}
h2.main9 { 
color: #ffffff;
text-align: center;
}
div.main9 { 
color: #bcbcbc;
text-align: left;
font-size: 15px;
}
div.main8 { 
color: #3f3f3f;
text-align: left;
font-size: 30px;
}
div.few { 
color: #bcbcbc;
text-align: left;
font-size: 13px;
}
div.few1 { 
color: #3f3f3f;
text-align: left;
font-size: 20px;
}
div.video { 
height: 200px;
}
body .x-btn,
body .button, [type="submit"] {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
opacity: 0.75;
}
p.offer { font-size: 20px;  sans-serif; text-align: center; color: #ffffff; font-weight: bold;}
p.offersmall { font-size: 17px;  sans-serif; text-align: center; color: #ffffff; }
flex-control-nav {
background-color: transparent;
}
.flex-control-nav a {
background-color: #333333;
}
.flex-direction-nav a.flex-next {
color: #333333; font-size: 50px;
}
.flex-direction-nav a.flex-prev {
color: #333333; font-size: 50px; float:right;
}
.widget ul li a, .widget ol li a {
color: grey;  text-decoration: none;
}
.single-x-portfolio .entry-wrap {
float: left;
width: 100%;
}
.single-x-portfolio .x-video {
float: left;
padding-right: 35px;
width: 50%;
}
a.photka {
opacity: 0.8; padding: 1px;
}
a.photka: hover {
opacity: 1;
}
.x-colophon.top {
padding: 50px 0px 0px;
}
.x-colophon.bottom {
padding: 0px 0px 0px;
}
.flex-direction-nav a.flex-next {
right: -50px;
}
.flex-direction-nav a.flex-prev {
left: -50px;
}
.x-btn {text-shadow: none !important;
}
h2.newone { 
color: #ffffff;
text-align: center;
}
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
#map_canvas{
width:100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
}
a.links {
color: #202020  ;
opacity: 0.8; 
}
a.links: hover {
color: #202020  ;
opacity: 0.8;
}
.x-navbar{
border:none;
}
@media ( min-width: 980px ) {.page-id-42 .x-brand.img {
background: url(http://artcreators.ru/wp-content/uploads/2014/10/logo-circle-rastr-white-no-circle.png);
background-size: 200px auto;
width: 200px;
min-height: 50px;
}
}
@media ( min-width: 980px ) {
.page-id-42 .x-brand img {
display: none;
}
}
.page-id-42 .x-navbar {  
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#playpausebtn{ position: fixed;
top: 85%;
left: 90%;
}
#playpausebtn:hover{ opacity: 1; transition: all 0.4s ease-in-out; 
-webkit-transform: scale(1.08);
-moz-transform: scale(1.08);
-o-transform: scale(1.08);
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.ch-item:hover {
box-shadow: 
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.page-id-42 #playpausebtn, .page-id-42 .x-navbar{
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:0.4;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:0.4;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:0.4;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity:0.4;
}
}
#bgvid {
animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
.page-id-42 .x-navbar { 
background-color: rgba(0, 0, 0, 0);
}
.page-id-42 #menu-item-5495 a,.page-id-42 #menu-item-5153 a, .page-id-42 #menu-item-5152 a, .page-id-42 #menu-item-5151 a{
color: white;
}
.x-navbar-inner {
min-height: 62px;
}
.page-id-42 .x-navbar .desktop .x-nav>li>a:hover, .x-navbar .desktop .x-nav>.x-active>a, .x-navbar .desktop .x-nav>.current-menu-item>a {
box-shadow: 0 2px 0 0 #fff;
}
.x-navbar .desktop .x-nav>li>a {
border-left: none !important;
}
.x-navbar .desktop .x-nav>li:last-child>a {
border-right: none !important;
}
.x-navbar .desktop .x-nav>li>a>span,
.x-navbar .desktop .x-nav>li>a:hover>span {
border:0;
}

[Thai]

Hi There,

There are some CSS errors in your custom CSS, please update it to the following code below:

@media ( max-width: 979px ) {
.x-slider-revolution-container.above {
display: none;
}
}
.admin-bar .x-navbar-fixed-top, .admin-bar .x-navbar-fixed-left, .admin-bar .x-navbar-fixed-right {
top: 0px;
}
.single-x-portfolio .entry-featured {
display: none;
}
.archive .x-navbar.x-navbar-fixed-top, 
.error404 .x-navbar.x-navbar-fixed-top, 
.category .x-navbar.x-navbar-fixed-top,
.tag .x-navbar.x-navbar-fixed-top,
.single-post .x-navbar.x-navbar-fixed-top,
.blog .x-navbar.x-navbar-fixed-top {
position: relative;
}
.single .entry-featured {
display: none;
}
@media (max-width: 1405px){
.x-navbar .x-nav>li>a {
letter-spacing: 1px;
}
}
@media (max-width: 1310px){
.x-navbar .x-nav>li>a {
letter-spacing: 0;
}
}
@media (max-width: 1220px){
.x-navbar .x-nav>li>a {
padding:30px .4em 0;
}
}
@media (max-width: 960px) {
.x-slider-revolution-container.above {
display: none !important;
}
}
@media (max-width: 977px) {
.x-slider-container.above {
display: none;
}
}
.x-btn-navbar {
margin-top: 11px;
}
body .x-btn:hover,
body .button, [type="submit"] {
-moz-box-shadow: none;
-webkit-box-shadow: none;
opacity: 1; text-shadow: none;
}
.x-btn-small {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#rh-copy {
display:none !important;
}
div.one { font-size: 20px; color: #000000; }
p.intro { text-align: center; font-weight: bold; font-size: 35px; color: #333333; }
p.intro2 { text-align: center; font-size: 15px; margin-right: 10%; margin-left: 10%; }
p.upper { color: #000000; text-align: center; font-size: 35px; }
p.why { font-size: 15px; sans-serif; text-align: center; color: #3f3f3f; }
p.why1 { font-size: 15px; font-weight: bold; sans-serif; text-align: center; color: #3f3f3f; }
p.white1 { font-size: 20px; font-weight: bold; sans-serif; text-align: center;color: #ffffff; }
p.white { font-size: 15px; sans-serif; text-align: center; color: #ffffff; }
p.wed1 { font-size: 20px; font-weight: bold; sans-serif; text-align: center;color: #ffffff; }
p.wedwhy1 { font-size: 20px; font-weight: bold; sans-serif; text-align: center; color: #ffffff; }
p.wedwhy { font-size: 15px;  sans-serif; text-align: center; color: #ffffff; }
p.wedblack { font-size: 25px; font-weight: bold; text-align: center; color: #3f3f3f; }
h1.theone { 
color: #ffffff;
text-align: center;
font-weight: bold;
}
h2.theone { 
color: #ffffff;
text-align: center;
}
h2.main9 { 
color: #ffffff;
text-align: center;
}
div.main9 { 
color: #bcbcbc;
text-align: left;
font-size: 15px;
}
div.main8 { 
color: #3f3f3f;
text-align: left;
font-size: 30px;
}
div.few { 
color: #bcbcbc;
text-align: left;
font-size: 13px;
}
div.few1 { 
color: #3f3f3f;
text-align: left;
font-size: 20px;
}
div.video { 
height: 200px;
}
body .x-btn,
body .button, [type="submit"] {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
opacity: 0.75;
}
p.offer { font-size: 20px;  sans-serif; text-align: center; color: #ffffff; font-weight: bold;}
p.offersmall { font-size: 17px;  sans-serif; text-align: center; color: #ffffff; }
flex-control-nav {
background-color: transparent;
}
.flex-control-nav a {
background-color: #333333;
}
.flex-direction-nav a.flex-next {
color: #333333; font-size: 50px;
}
.flex-direction-nav a.flex-prev {
color: #333333; font-size: 50px; float:right;
}
.widget ul li a, .widget ol li a {
color: grey;  text-decoration: none;
}
.single-x-portfolio .entry-wrap {
float: left;
width: 100%;
}
.single-x-portfolio .x-video {
float: left;
padding-right: 35px;
width: 50%;
}
a.photka {
opacity: 0.8; padding: 1px;
}
a.photka:hover {
opacity: 1;
}
.x-colophon.top {
padding: 50px 0px 0px;
}
.x-colophon.bottom {
padding: 0px 0px 0px;
}
.flex-direction-nav a.flex-next {
right: -50px;
}
.flex-direction-nav a.flex-prev {
left: -50px;
}
.x-btn {text-shadow: none !important;
}
h2.newone { 
color: #ffffff;
text-align: center;
}
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
#map_canvas{
width:100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
}
a.links {
color: #202020  ;
opacity: 0.8; 
}
a.links: hover {
color: #202020  ;
opacity: 0.8;
}
.x-navbar{
border:none;
}
@media ( min-width: 980px ) {
.page-id-42 .x-brand.img {
background: url(http://artcreators.ru/wp-content/uploads/2014/10/logo-circle-rastr-white-no-circle.png);
background-size: 200px auto;
width: 200px;
min-height: 50px;
}
}
@media ( min-width: 980px ) {
.page-id-42 .x-brand img {
display: none;
}
}
.page-id-42 .x-navbar {  
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#playpausebtn{ position: fixed;
top: 85%;
left: 90%;
}
#playpausebtn:hover{ opacity: 1; transition: all 0.4s ease-in-out; 
-webkit-transform: scale(1.08);
-moz-transform: scale(1.08);
-o-transform: scale(1.08);
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
.ch-item:hover {
box-shadow: 
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.page-id-42 #playpausebtn, .page-id-42 .x-navbar{
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:0.4;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:0.4;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:0.4;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity:0.4;
}
}
#bgvid {
animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
.page-id-42 .x-navbar { 
background-color: rgba(0, 0, 0, 0);
}
.page-id-42 #menu-item-5495 a,.page-id-42 #menu-item-5153 a, .page-id-42 #menu-item-5152 a, .page-id-42 #menu-item-5151 a{
color: white;
}
.x-navbar-inner {
min-height: 62px;
}
.page-id-42 .x-navbar .desktop .x-nav>li>a:hover, .x-navbar .desktop .x-nav>.x-active>a, .x-navbar .desktop .x-nav>.current-menu-item>a {
box-shadow: 0 2px 0 0 #fff;
}
.x-navbar .desktop .x-nav>li>a {
border: none !important;
}
.x-navbar .desktop .x-nav>li:last-child>a {
border: none !important;
}
.x-navbar .desktop .x-nav>li>a>span,
.x-navbar .desktop .x-nav>li>a:hover>span {
border: none !important;
}

Let us know how it goes!

[Kirillborisov]

it goes well!

thanks a lot.

[Prasant Rai]

You are most welcome 🙂 .

[vectorfive]

Hi! Ive tried the top suggestions but it still doesnt remove the lines.
http://think3dmedia.com/
Please do help. Thank you

[Rupok]

Hi there,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

.x-navbar {
border: none;
}
.x-logobar {
border: none;
}
.x-navbar .desktop .x-nav > li:first-child > a, .x-navbar .desktop .x-nav > li > a {
border: none;
}

If you have other concern, please add some screenshot and clarify which border you actually trying to remove.

Hope this helps.

Cheers!

[Author]

Posts