Hi Dude, thanks for you reply. Yep, the menus are all in the correct place. The problem is the main parent item (in a mega menu) becomes a title when switched down to mobile. At desktop size it’s fine. The image above shows the slightly lighter grey titles (which are the main mega-menu parent pages).

the code for the social bar doesnt work.

is there a conflict in some of my CSS style code?

#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: #4787f3;
color: #ffffff;
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;
}
.widget .gform_wrapper .gform_footer br{
display: none !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.with_nav span {
color: orange;
font-size: 20px;
}

thanks a lot!

And how can i change the logo location?

it is sticking on the top but should be moved down a little bit

I figured it out:

Add the following code to your custom.css:

#top .main_menu .menu .custom-menu-item a { color:red; }
#top .main_menu .menu .custom-menu-item a:hover { color: green; }

Then go to WP Appearance/Menus and set “custom-menu-item” class in the “CSS Classes (optional)” of your menu item.
If you can’t find “CSS Classes (optional)”, then please watch this quick video: http://www.youtube.com/watch?v=5Uncd4pjTuE

Thanks)

Hello Ismael,

Thank you for the response, but that did not add a search bar at the top of the page on an iPhone or iPad. Do I need to add any additional code there?

Thanks.

Hi have this code :

$output .= "<div data-ajax-id='{$the_id}' class=' grid-entry flex_column isotope-item all_sort {$style_class} {$post_class} {$sort_class} {$grid} {$extraClass}'>";
				$output .= "<div class='main_color inner-entry'>";
				$output .= "<a target='_blank'href='{$link}' data-rel='grid-".avia_post_grid::$grid."' class='grid-image' title='".esc_attr(strip_tags($title))."'>".get_the_post_thumbnail( $the_id, $image_size )."</a>";
				$output .= !empty($title) || !empty($excerpt) ? "<div class='grid-content'><div class='avia-arrow'></div>" : '';
				$output .= !empty($title) ? "<h3 class='grid-entry-title'><a target='_blank'href='{$title_link}' title='".esc_attr(strip_tags($title))."'>".$title."</a></h3>": '';
				$output .= !empty($excerpt) ? "<div class='grid-entry-excerpt'>".$excerpt."</div>" : '';
				$output .= !empty($title) || !empty($excerpt) ? "</div>" : '';
				$output .= "</div>";
				$output .= "</div>";