Remove the black bars in the menu

You mean the separators in between menu items?
That’s not in the style.css but is generated automatically by the theme. You can override it with this:

#nav-main .nav-main,
#nav-main .nav-main > li,
#nav-main .nav-main > ul > .page_item {
    border-left: none;
    border-right: none;
}

Thanks for your fast reply. But nor worked.
This is my custom CSS

/*
Theme Name:     Frontier Child
Theme URI:      https://ronangelo.com/frontier/
Description:    Child theme for Frontier.
Author:         ronangelo
Author URI:     https://ronangelo.com/
Template:       frontier
Version:        1.0
*/

/* Your modification goes here */

/* TEST */

#nav-main .sub-menu, #nav-main .children {
	background-color: rgb(60, 60, 60);
	position: absolute;
	float: left;
	width: 178px;
	border: none;
	box-shadow: 0 1px 4px #000;
	z-index: 990;
	display: none;
}

#nav-main .sub-menu li a:hover {
	border-top: none;
	border-bottom: none; 
	border-right: 5px solid #008139;
}

#nav-main .sub-menu li, #nav-main .children li {
	border-top: none;
	border-bottom: none; 
}

#nav-main .nav-main,
#nav-main .nav-main > li,
#nav-main .nav-main > ul > .page_item {
    border-left: none;
    border-right: none;
}

/********************/

/* Navegación */

#nav-main .menu-item-has-children > a:after,
#nav-main .page_item_has_children > a:after {
	font-family: "Genericons";
	content: "\f431";
	vertical-align: top;
	padding-left: 4px;
	font-weight: bold;
}

#nav-main .sub-menu .menu-item-has-children > a::after,
#nav-main .children .page_item_has_children > a::after {
	content: "\f431";
	vertical-align: middle;
	font-weight: none;
	display: inline-block;
	transform: rotate(270deg);
}

#nav-main {
	background-color: #008139;
	width: 100%;
	border-bottom: 0px solid #000;
	padding-left: 10px;
	line-height: 1.5;
}

#nav-main.dropped .nav-main {
background-color: transparent;
display: block;
margin: 0px 4px;
}

#nav-main .nav-main a:hover {
	background-color: #FFF;
	color: #000;
	text-shadow: none;
}

#nav-main .nav-main a {
	display: block;
	padding: 8px 14px;
	color: #FFF;
	font-family: 'Roboto Condensed', Sans-serif;
	font-size: 16px;
	text-shadow: 2px 2px 2px #222;
}

/* Cabecera */

#top-bar {
	background-color: #222;
	border-bottom: 0px solid #000;
	padding: 4px;
	min-height: 34px;
	width: 100%;
}

#header {
  	background-image: url("https://www.faib.es/wordpress/wp-content/themes/frontier-child/img/logoheader.png");
	background-position: center;
	border-top: none;
	width: 100%;
	border-bottom: 0px solid #000;

}

#site-title {
vertical-align: middle;
}

#site-title a {
color: white;
text-shadow: 2px 2px 2px black;
}

#top-bar-info {
float: none;
text-align: center;
}

#container {
	margin: 0 auto;
	box-shadow: 0 0 20px #000;
}

/* Responsive */

@media screen and (max-width:940px){
	#header-logo {
		margin: 0;
		text-align: center;
		width: 100%;
	}

	#header-logo > a {
		float: left;
		line-height: 0;
		width: 100%;
	}

	#header-logo img {
		float: none;
	}	
}

@media screen and (max-width:540px){
	#header-logo {
		margin: 0;
		text-align: center;
		width: 90%;
	}

	#header-logo > a {
		float: left;
		line-height: 0;
		width: 90%;
	}

	#header-logo img {
		float: none;
		width: 90%;
	}	
}

.widget-title {
	background-color: #353535;
}

@media screen and (max-width:1000px){

#header {
  	background-image: none;
}

	#header-logo {
		margin: 0;
		text-align: center;
		width: 100%;
	}

	#header-logo > a {
		float: left;
		line-height: 0;
		width: 100%;
	}

	#header-logo img {
		float: none;
	}

	.widget-header {
		float: none;
		text-align: center;
		width: 100%;
	}

	.widget-footer {
		display: block;
		margin: 0 0 10px;
		width: 100% !important;
	}

	#nav-top {
		display: block;
		float: none;
		clear: both;
	}

	#nav-top .nav-top {
		float: none;
	}

	#nav-main {
	background-color: #333;
	border-bottom: none;
	text-align: center;
	font-weight: bold;
	}

	#nav-main .nav-main {
		float: none;
		border: none !important;
	}

	#nav-main .nav-main > li, #nav-main .nav-main > ul > li {
		clear: both;
		float: none;
		border-bottom: 1px solid #222;
		border-left: none;
		border-right: none;
	}

	#nav-main .nav-main > li:last-child, #nav-main .nav-main > ul > li:last-child {border-bottom: none;}

	#nav-main .sub-menu, #nav-main .children, #nav-main .sub-menu li, #nav-main .children li {
		border: none;
		box-shadow: none;
	}

	#nav-main .sub-menu a {padding: 10px 20px;}
	#nav-main .sub-menu .sub-menu a {padding-left: 40px;}
	#nav-main .sub-menu .sub-menu .sub-menu a {padding-left: 60px;}
	#nav-main .sub-menu .sub-menu .sub-menu .sub-menu a {padding-left: 80px;}

	#nav-main .sub-menu .sub-menu, #nav-main .children .children {top: 0;}

	#nav-main li:hover > ul {display: none;}
	#nav-main .page_item:hover > ul {display: inline;}

	#nav-main .toggle-on > .sub-menu {
		display: block;
		position: relative;
		overflow: hidden;
	}

	#nav-main .toggle-on > .sub-menu,
	#nav-main .toggle-on > .sub-menu > li,
	#nav-main .toggle-on > .sub-menu > li a {
		width: 100%;
	}

	.rtl #nav-main {padding-right: 0;}
	.rtl #nav-main .nav-main,
	.rtl #nav-main .nav-main li {float: none;}

	.rtl #nav-main .sub-menu .sub-menu a {padding-left: 20px; padding-right: 40px;}
	.rtl #nav-main .sub-menu .sub-menu .sub-menu a {padding-left: 20px; padding-right: 60px;}
	.rtl #nav-main .sub-menu .sub-menu .sub-menu .sub-menu a {padding-left: 20px; padding-right: 80px;}

	#nav-main .drop-toggle {
		display: block;
		text-align: center;
	}

	#nav-main.drop .nav-main {
		display: none;
	}

	#nav-main.dropped .nav-main {
		background-color: #333;
		display: block;
		margin: 0 40px 20px;
	}

	#nav-main.dropped .sub-menu {
		display: block;
		padding: 0 5px;
		position: relative;
	}

	#nav-main.dropped .nav-main li,
	#nav-main.dropped .nav-main a,
	#nav-main.dropped .nav-main .sub-menu {
		border: none;
		width: 100%;
	}

	#nav-main.dropped .nav-main li {
		background: none;
	}

	#nav-main.dropped .nav-main li a {
		text-align: inherit;
		border-bottom: 1px solid #9e9e9e;
		margin: 5px;
	}
}

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block;  text-align:center;}
tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align:center;  
  }
}

Try adding !important

border-left: none !important;
border-right: none !important;

Also make sure that it’s not an old cached css that is loading but the new edited one. Clear your browser cache or press CTRL + F5 when browsing your website.

• This reply was modified 7 years, 9 months ago by ronangelo.