Hi Andy,

can you define what do you mean for “mobile devices”? Do “mobile devices” include also tablets? What about laptops? Are they considered “mobile devices” as well?
As wrote in my first post, I’m experiencing this problem on an iPad tablet and it looks weird to me that video backgrounds in color sections work only for desktop and laptop.
If this is the case, please add a specification about that in the theme description for transparency sake… this is really important to take in account when someone is buying a theme, considering that people are more and more using phones and tablets to browse websites.

Waiting for your answer.

Hi Yigit,
thanks for your reply.

I tried your code and unfortunately it’s not solving the issue. In fact it applies the black loading animation to the page preloading producing an ugly result.

My question instead was asking a solution for the other way round, that is to use the preloader animation (tiny blue circle) in place of the content loading (black circle with dots).

Best.

• This reply was modified 9 years ago by T_Architect88-2015.

Hi Andy,
I used the code with percentage, I had to use -115% to have it aligned on my screen. Unfortunately the menu is still losing the centered alignment once I change the window size. You can see this behavior at lindemanngroup.com/home
I place below the style.css used in my child theme, maybe there is something wrong there… can you please have a look ?
Thanks in advance

if(!is_admin()) add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100, 1);
function avia_register_child_frontend_scripts()
{
	$child_theme_url = get_stylesheet_directory_uri();

	//dequeue default scripts
	wp_dequeue_script('avia-popup');

	wp_enqueue_script( 'avia-popup',  $child_theme_url .'/js/jquery.magnific-popup.min.js', array('jquery'), 2, true);
}

/*SLIDESHOW CAPTION POSITION*/
.slideshow_align_caption {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

/*SLIDESHOW CAPTION FONT WEIGHT*/
.avia_transform .av_fullscreen .active-slide .avia-caption-title {
    font-weight: 300 !important;
}
.avia_transform .av_fullscreen .active-slide .avia-caption-content {
    font-weight: 300 !important;
}

/*LOGO ALIGNMENTO TO CENTER*/
.avia-menu.av-main-nav-wrap {
    left: -50%;
}

/*MENU LOGO*/
div .logo {
    display: none;
}

/*MENU FONT*/
.main_menu ul:first-child > li > a {
   font-size: 16px; 
   font-weight:300;
}

/*MENU FONT HIGHLIGHT COLOR*/
.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: #bbbbbb;
}

/*MENU TRANSPARENCY*/
#top .header_color .header_bg, #header_main {
    background-color: rgba(255,255,255,0.75);
}

/*MENU BORDER BOTTOM VISIBLE WHEN SCROLLING*/
#header_main {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #e1e1e1;
    margin-bottom: -1px;
}

/*TOP BAR TRANSPARENCY*/
.header_color .container_wrap_meta {
    background-color: rgba(2242,242,242,0.2);
}

/*TOP BAR FONT*/
.sub_menu>ul>li>a, .sub_menu>div>ul>li>a {
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    padding: 7px 0;
}

/*MASONRY BACKGROUND*/
.av-masonry-container {
    width: 100.4%;
    float: left;
    clear: both;
    background: #ffffff !important;
    position: relative;
}

.main_color .av-masonry {
    background: #ffffff !important;
}

.av-large-gap .av-masonry-sort {
    margin: 0 15px 15px 0;
    background: #ffffff !important;
}

/*MASONRY CAPTION BACKGROUND*/
.main_color .avia-arrow {
    background-color: #f2f2f2;
}
.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
    background-color: #f2f2f2;
}

/*MASONRY LOAD MORE BTN*/
.main_color .av-masonry-pagination {
    background-color: #f2f2f2 !important;
}
.main_color .av-masonry-pagination:hover {
    background-color: #f8f8f8 !important;
}

/*ICONS + CIRLE*/
.av_font_icon.av-icon-style-border .av-icon-char {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    font-size: 50px !important;
    line-height: 70px !important;
    width: 70px !important;
    border-radius: 500px;
    border-width: 2px;
    border-style: solid;
    display: block;
    margin: 0 auto;
    padding: 30px;
    color: inherit;
    border-color: inherit;
    position: relative;
}

/*ARCHITIZER HOVER COLORS*/
#top #wrap_all .av-social-link-architizer:hover   a{color:#ffffff; background-color:#00a0fc; }
#top #wrap_all .av-social-link-houzz:hover   a{color:#ffffff; background-color:#7cc04d; }

/*HOT SPOT CUSTOMIZATION*/
.av-hotspot-container .av-image-hotspot_inner {
    color: #1c9bb7;
}

.responsive .av-image-hotspot{
    height: 15px;
    width: 15px;
    line-height: 15px;
}

.responsive .av-image-hotspot-pulse {
    width: 39px;
    height: 39px;
    line-height: 15px;
    top: -12px;
    left: -12px;
}

Hi Andy,

thanks for the fast reply.
I tried the provided code and it is resolving the issue only partly.
In fact, changing the browser window size / screen resolution, the menu is not keeping the centered position anymore. Sometimes is even distributed on more lines. (see image)
I would like to keep the alignment of the menu centered on every browser/screen size (except for mobile).
I hope there is a solution for that.