Hey COLORIT!

You need to add the walker menu. Please hire someone to modify wp_nav_menu and add the walker feature. You can also try this:

Add this on your functions.php:

class My_Walker extends Walker_Nav_Menu
{
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="' . esc_attr( $class_names ) . '"';

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '<span class="walker-sub">' . $item->description . '</span>';
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Go to Quick CSS, add this code:

.walker-sub {
	display: block;
	position: absolute;
	top: 70px;
	min-width: 90px;
	font-size: 10px;
	color: gray;
	line-height: 12px;
}

Edit includes/helper-main-menu.php, find this code on line 167:

 echo "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
                                $avia_theme_location = 'avia';
                                $avia_menu_class = $avia_theme_location . '-menu';
                                $args = array(
                                    'theme_location'	=> $avia_theme_location,
                                    'menu_id' 			=> $avia_menu_class,
                                    'container_class'	=> $avia_menu_class,
                                    'fallback_cb' 		=> 'avia_fallback_menu',
                                    'walker' 			=> new avia_responsive_mega_menu()
                                );

Replace it with:

echo "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
                                $avia_theme_location = 'avia';
								$walker = new My_Walker;
                                $avia_menu_class = $avia_theme_location . '-menu';
                                $args = array(
                                    'theme_location'	=> $avia_theme_location,
                                    'menu_id' 			=> $avia_menu_class,
                                    'container_class'	=> $avia_menu_class,
                                    'fallback_cb' 		=> 'avia_fallback_menu',
                                    'walker' 			=> $walker
                                );

Best regards,
Ismael

• This reply was modified 11 years ago by Josue.

Hi Indiatravelz!

You can find the css style of the Tab element on css > shortcodes.css:

#top .tabcontainer{
background: transparent;
}

.tabcontainer{
margin: 30px 0;
position: relative;
width:100%;
clear: both;
overflow: hidden;
background: transparent;
}

.tab_titles{
position: relative;
width:100%;
clear: both;
float:left;
z-index: 5;
}

.widget .tabcontainer{
margin-top:0px;
}

.js_active .tab_content{
visibility: hidden;
clear: both;
padding: 10px 19px;
overflow:auto;
position: absolute;
top:0;
z-index: 0;
left:120%;
width:100%;
}

.js_active .tab{
cursor:pointer;
margin:0 -1px 0 0;
display: block;
float: left;
z-index: 2;
position: relative;
padding:12px 16px;
top:1px;
font-size: 11px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-style: solid;
border-width:1px;
}

.js_active .top_tab .tab{
border-bottom: none;
padding:12px 16px 14px 16px;
}

.js_active .active_tab{
z-index: 4;
position: relative;
font-weight: bold;
}

.js_active .tab_titles .tab:first-child{
border-top-left-radius:  2px;
}

.js_active .tab_titles .tab:last-child{
border-top-right-radius: 2px;
}

.js_active .active_tab_content{
display: block;
visibility: visible;
z-index: 3;
position: relative;
overflow:auto;
border-style: solid;
border-width:1px;
border-radius: 2px;
left:0;
width:auto;
}

.tabcontainer .tab_icon{
margin-right: 7px;
font-size: 13px;
}

.tab_inner_content{
margin: 11px 0;
left:-200%;
position: relative;
}

.active_tab_content .tab_inner_content{
left:0;
position: relative;
}

Can you please post a screenshot of what you’re trying to do?

Best regards,
Ismael

Hey Jorge!

Please add following code to Quick CSS in Enfold theme options under Styling tab

@media only screen and (min-width: 481px) and (max-width: 989px) { .social_header .phone-info { font-size: 14px; }}
@media only screen and (min-width: 481px) and (max-width: 767px) { .sub_menu { line-height: 18px; }}
@media only screen and (max-width: 480px) { .sub_menu { line-height: 16px; font-size: 12px; }
.social_header .phone-info { font-size: 11px; }}

Cheers!
Yigit

Hey Mkieling!

Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as desired

body, p { font-size: 16px; color: #e1e1e1; }

Cheers!
Yigit

Hi!

It does seem to be working on my end http://i.imgur.com/5UsMA3v.jpg it is 28px
Please flush browser cache and refresh your page a few times

Regards,
Yigit

Hi!

Please add following code to Quick CSS in Enfold theme options under Styling tab

.page-id-8570 .pricing-table-wrap { display: table-header-group; }
.page-id-8570 .avia-table { margin: 0; }
.page-id-8570 .pricing-table li.avia-pricing-row { font-size: 19px; }

It should look like this after changes http://i.imgur.com/eaXfOnB.jpg

Cheers!
Yigit

Hey sappermarine!

Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as desired

.entry-content-wrapper .post-title { font-size: 28px; }

Cheers!
Yigit

Hi!

Please add following code to Quick CSS in Enfold theme options under Styling tab
1

#mobile-advanced a { font-size: 15px; }
#mobile-advanced li > a { border-color: #e1e1e1; }

Best regards,
Yigit

Hi!

Please replace the code i posted previously with following one

.header_color .main_menu ul:first-child > li > a { font-size: 18px!important; color: red!important; background-color: green!important; }
.header_color .main_menu ul:first-child > li > a:hover { color: orange!important; }
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: blue!important; }

Flush browser cache after applying the code and refresh your page a few times. If that does not work, please try adding the code to Custom.css file inside Enfold/css folder

Regards,
Yigit

Hi!

You can add this on your custom.css or Quick CSS:

.title_container .main-title {
font-size: 16px;
line-height: 2.3em;
font-weight: 400;
}

Are you talking about the headline on the title container?

Best regards,
Ismael

Hey dejatobin!

Please add following code to Quick CSS in Enfold theme options under Styling tab

#top .main_menu .menu li ul a { font-size: 13px; }

If you want to apply the same font weight, please add following code as well

#top .main_menu .menu li ul a { font-weight: 600; }

Best regards,
Yigit

Hi mhiller!

Please try adding following code to Quick CSS as well

@media only screen and (max-width: 480px) { .template-page .entry-content-wrapper h1 { font-size: 24px; }}

Best regards,
Yigit