Navigation
Archive / Ethos Nav Bar – How to remove border around menu links
This is archived content. Visit our new forum.
1 2
  • Author
    Posts
  • February 23, 2015 at 12:22 pm #213189

    Joel
    Participant

    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.

    February 23, 2015 at 3:55 pm #213367

    Nabeel A
    Moderator

    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!

    August 12, 2015 at 1:07 pm #357330

    Noli
    Participant

    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

    August 12, 2015 at 3:38 pm #357460

    Prasant Rai
    Moderator

    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.

    August 13, 2015 at 6:48 am #358204

    Noli
    Participant

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

    August 13, 2015 at 6:50 am #358207

    Noli
    Participant
    This reply has been marked as private.
    August 13, 2015 at 7:38 am #358252

    Paul R
    Moderator

    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.

    August 13, 2015 at 10:18 am #358339

    Noli
    Participant

    Amazing!!!! Thank you so much!!

    August 13, 2015 at 12:02 pm #358431

    Nico
    Moderator

    You’re most welcome.

    Have a great day! šŸ™‚

    August 24, 2015 at 5:26 am #367407

    Kirillborisov
    Participant

    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;
}
    August 24, 2015 at 5:31 am #367414

    Thai
    Moderator

    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!

    August 24, 2015 at 11:20 am #367723

    Kirillborisov
    Participant

    it goes well!

    thanks a lot.

    August 24, 2015 at 12:19 pm #367796

    Prasant Rai
    Moderator

    You are most welcome šŸ™‚ .

    September 9, 2015 at 7:13 pm #383791

    vectorfive
    Participant

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

    September 9, 2015 at 10:24 pm #383931

    Rupok
    Member

    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
1 2