a big problem with those diagonal settings is that settings bigger than 5deg could end in a different behavior on wide screens 27′ Mac Retina Display and more. you see trick what is used and what happends if you go from 5deg to 10deg

• This reply was modified 9 years, 2 months ago by Guenni007.

btw. if you are using this elegant demo and have some extra pages/post not on the front-page you have to set the padding of
.responsive #top #main – otherwise the content starts down the header

as i said let the instruction of 480px on top go away:

.main_menu { top: -20px !important}

@media only screen and (max-width: 990px) {
.js_active.html_burger_menu #avia-menu .av-burger-menu-main, .html_burger_menu #top #avia-menu .menu-item-search-dropdown {display: block}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {display: block}
.avia-menu.av_menu_icon_beside {
    margin-right: 10px;
    padding-right: 0;
    top: 0;
}
.responsive #header .main_menu .social_bookmarks { display: block}
.responsive #top .logo {
    display: block;
    float: left;
    position: absolute;
}
div .logo {
    float: left;
}
.main_menu {
    position: absolute !important;
}
.responsive.html_header_top #header_main .social_bookmarks, .responsive.html_top_nav_header #top .social_bookmarks {
    margin-top: 45px;
    right: 0;
    width: auto;
    top: 0
}
#advanced_menu_toggle { 
display: none !important; 
}
}

@media only screen and (max-width: 480px) {
.responsive #top #wrap_all #header_main .container {
    max-width: 95%;
    width: 95%;
}
.responsive .logo img {
    max-width: 200px !important;
    top: 15px;
}
.logo, .logo a {
    overflow: visible;
}
}

you have to play a bit with positioning – that was a quickly shot solution

if you don’t like that downlimit remove it:

@media only screen and (max-width: 990px) { …

but you see here what happend in the case above: http://webers-testseite.de/elegant/

if you deleted the 480px down limit – you have to say what happens to the new menu for small screens. Where do those icons go when logo + social icons + menu icon is bigger than the screen width?

.header_color .main_menu ul:first-child li:hover.menu-item-top-level > a {
    color: #900 !important;
text-transform: uppercase
}

and if you only want to have it for top level links with submenu:

.header_color .main_menu ul:first-child li:hover.menu-item-has-children.menu-item-top-level > a {
    color: #900 !important;
text-transform: uppercase
}

• This reply was modified 9 years, 2 months ago by Guenni007.

try this – i decided to show the old mobile menu under 480px

@media only screen and (min-width: 480px) and (max-width: 990px) {

.js_active.html_burger_menu #avia-menu .av-burger-menu-main, .html_burger_menu #top #avia-menu .menu-item-search-dropdown {display: block}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {display: block}
.avia-menu.av_menu_icon_beside {
    margin-right: 5px;
    padding-right: 0;
    top: -20px;
}

.responsive #header .main_menu .social_bookmarks { display: block}

.responsive #top .logo {
    display: block;
    float: left;
    position: absolute;
}

div .logo {
    float: left;
}

.main_menu {
    position: absolute !important;
}

.responsive.html_header_top #header_main .social_bookmarks, .responsive.html_top_nav_header #top .social_bookmarks {
    margin-top: 25px;
    right: 0;
    width: auto;
    top: 0
}

#advanced_menu_toggle { 
display: none !important; 
}
}

well there is a class added to the opend mega-menu:

.open-mega-a {
    text-transform: uppercase;
    color: #900 !important;
}

font-weight is bold per default i think

for the responsive case it will be a good advice to setup some media-querry instructions what happend to the 2nd column.

f.e.

@media only screen and (max-width: 990px) {
.responsive .page-id-3220 #after_full_slider_1 {
    position: relative !important;
    top: 0 !important;
    width: 100%;
}
}

perhaps you can make the trick by having on top a fullwidth slider and then after that a 1/1 container.
After that you can give the 1/1 container a transparent background and a negative margin

see here: http://webers-testseite.de/ikom/full-slider-with-content/

i can not confirm the “slowness of your site” even the images seems to be in a correct size and not oversized!
The only thing i don’t like is your “footer only navigation” on page with big content – you have to scroll endlessly to come to the next site !

Me as a visitor – i’m lost than for your site !

i don’t know if you get rid of the one by one appear – the animation and fly in you can get rid of:

.avia_sortable_active .isotope {
    transition: none  !important;
}
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    animation: none !important
}
.av-masonry-image-container, .av-inner-masonry-content, .av-masonry-pagination {
    transition: none  !important;
}
.avia_desktop.avia_transform3d .av-masonry-entry {
    perspective: none !important;
}

well -this is an image gallery on masonry?
Is the original sequence lost totaly? or does only a few entries are in a different sort order?

Because it seem that you have choosen the perfect automatic masonry. Images which are more than 2:1 bigger in width or heights shown in that manner. I don’t know what influences the order but if you try to order it in that alb element again in your prefered manner – this is without effect?

maybe it is concerning to that cors problematic !

try it: http://kriesi.at/documentation/enfold/enable-cors/

oh sorry i see above that i have used one time the calc instruction. This is not necessary. Just use hight: 66.7vw – and so on.