Hi Ismael,

I have added a lot of custom CSS from Yigit. I will add it all below as I am unsure which bits you need.

.sub_menu { top: 390%; }
.header-scrolled .sub_menu { top: 270%; }
.page-id-2528 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2736 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2609 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2605 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2625 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-2621 .sub_menu li { padding: 0 50px; top: 30px; font-size: 12px; }
.page-id-734 .sub_menu li { display: none; }
.page-id-1277 .sub_menu li { display: none; }
.page-id-1122 .sub_menu li { display: none; }
.page-id-1224 .sub_menu li { display: none; }
.page-id-1167 .sub_menu li { display: none; }
#top div .enfold-gallery img {
padding: 0;
border: none;
}
.responsive #header .sub_menu { position: absolute; }

.page-id-2528 .sub_menu li { padding: 0 44px; }
.page-id-2736 .sub_menu li { padding: 0 44px; }
.page-id-2609 .sub_menu li { padding: 0 44px; }
.page-id-2605 .sub_menu li { padding: 0 44px; }
.page-id-2625 .sub_menu li { padding: 0 44px; }
.page-id-2621 .sub_menu li { padding: 0 44px; }

@media only screen and (max-width: 480px) {
.page-id-2528 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2736 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2609 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2605 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2625 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2621 .sub_menu li { padding: 0 5px; }
.content { padding-top: 90px; } }
@media only screen and (max-width: 480px) {
.page-id-2528 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2736 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2621 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2736 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2625 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2609 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

@media only screen and (max-width: 480px) {
.page-id-2605 .sub_menu, .page-id-999 .sub_menu, .page-id-9989 .sub_menu { display: block; }
.sub_menu { display: none; } }

Thank you Ismael, but I was unspecific in my question, so I’m hoping you can provide a little more help.
I did locate the Styling that defines the font, but if I set it to Open Sans as you suggest, I still see several differences between my responsive menu and the one you use:

http://avatron.com/images/test/yourMenu-v-myMenu.png

Specifically:
1) how may I change the font size in the responsive menu (yours looks at least 1 point bigger to me)
2) how may I add the horizontal rules between menu items

Thanks again. Both of us working on our website overhaul are so impressed with the Enfold theme and the quality and speed of your support team.

Figured it out:

body { font-size: 15px!important; }

it does work. Sorry!

Hi
i am missing the font tab to set size of font.
look here – http://lavi.suska-plus.co.il/food/wp-content/uploads/font-problems.jpg

regards,
Berg

Hi Ismael THX that did the trick.

The letters in that header meta are now a very weird purple color also the social buttons. What to do about that?

If feel something is conflicting in my CSS code: Any idea?

#top .main_menu .menu li a { font-size: 18px; color: white; background-color: #4787f3; }
#top .main_menu .menu li a:hover { background-color: #4787f3; color: grey; }

#top .header_color .main_menu .menu ul li a{
background-color: #ffffff;
color: #4787f3;
font-size: 17px;
}
#header_main {
background: #4787f3;
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 8px;
font-size: 17px;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
.woocommerce .template-shop.content.nine.units {
width: 100%;
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
.woocommerce .template-shop.content.nine.units {
}
.grid-content {
height: 70px;
}
.woocommerce .sidebar {
display: none !important;
}
.woocommerce .template-shop.content.nine.units {
width: 1030px;
border: none;
}
.header_color .sub_menu>ul>li>a {
font-size: 12px;
color: #0e75bf;
}
#top .main_menu .menu a {
color: white;
}
#top .main_menu .menu a:hover {
color: white;
}
.main_menu ul:first-child > li > a {
font-size: 17px;
font-weight: 700;
color: white;
}

#footer .widget {
padding: 30px 0 30px 0 !important;
}
.numeric_controls, .arrow_controls {
position: absolute;
bottom: 100px;
}

#top .sidebar_tab_content.sidebar_active_tab_content {
background-color: #fff;
color: black;
}
#top .sidebar_tab.sidebar_active_tab {
background-color:#0e75bf;
color: #fff;
}
.slideshow_color .breadcrumb, .slideshow_color .breadcrumb a {
color: #0e75bf;
}
.numeric_controls, .arrow_controls {
position: absolute;
bottom: 10px;
}
#top .ajax_controlls {
top: 70%;
}
#footer .widget_nav_menu li a {
font-size: 20px;
}

#menu-item-1045 a, #menu-item-1044 a, #menu-item-1043 a, #menu-item-1988 a {
color: #FFF;
font-size: 25px;
}
#footer .widget_nav_menu li a {
text-align: center;
}
.iconbox_icon {
background-color: white !important;
}
.widget_nav_menu h3.widgettitle {
text-align: center;
}
#top .iconbox {
width: 100%;
}
#top .avia_mega_div {
background-color: #f5f2f5;
color: grey;
}
#top .avia_mega_div .sub-menu {
background-color: #f5f2f5;
color: grey;
}
#top .avia_mega_div .menu-item ul {
background-color: #f5f2f5;
color: grey;
}
#top .main_menu .menu ul li a {
background-color: #f5f2f5;
color: white
}
.sidebar_tab_title {
margin-left: 10px !important;
}
#js_sort_items a {
font-size: 19px;
}
#top.woocommerce-page .woocommerce-ordering select { width: 25%; }

@media only screen and (max-width: 767px) {
#top.woocommerce-page .woocommerce-ordering select {width: auto; }
}
.chzn-container {
position: initial;
}
#top .chzn-container .chzn-drop {
top: 70px !important;
width: 325px !important;
margin-left: 3px;
}
.woocommerce-pagination {
display: none;
}
#top.tax-product_cat .container > .term-description {
display: none;
}
.added_to_cart {
display: none;
}
.form-row.address-field{
overflow: visible;
}
#top .chzn-single div b {
background-position: 5px 6px !important;
}
div .main_color .active_tab {
background-color: #0e75bf;
color: #FFF;
}
div .main_color .tabcontainer .active_tab {
color:#FFF;
}
#top .main_color .tabcontainer .tab:hover {
#FFF:

}
.main_menu ul:first-child > li > a {
padding: 0 5px;

}
#top .main_menu ul:first-child > li > a {
padding: 0 13px;

}
.social_header .phone-info { color: orange!important; font-size: 20px!important; }
.logo img { padding: 20px 0 0 0; }
.header-scrolled .logo img { padding: 5px 0; }
#header_meta { background-color: white; }