@shannab – you have images above 2MB Dataamount ! one is 3.5MB
recalculate those images . Take jpg and progressive option for them.
Do not take the highest quality option – high or middle is enough ! I guess that 2000 px width will be enough !
espacially because some are not so sharp (a bit blured even)

this will help loading time

edit : oh Elliot mentioned it allready – so try to shrink your images without alterning the dimensions

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

and what do you want to make with your long navigation and a big logo with long slogan ?
underneath the 1650px they will overlap

do you realy read all the instructions or is it my bad english that sometimes some instructions are lost ?

this code here:

.responsive #top #wrap_all #header_main .container {
float:none;
max-width:100%;
padding-left:0;
padding-right:0;
width:100%;
margin:0 auto
}

has to be inserted instead of :

.responsive #top #wrap_all .container {
float:none;
max-width:100%;
padding-left:0;
padding-right:0;
width:100%;
margin:0 auto
}

you see the difference : now only the container after #header_main is selected

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

Bitte lösche mal bitte meine Registrierung :lol:

ich habe noch keine E-Mail erhalten !

ich hatte mal gaaaaaaanz früher ein Problem, das Kontaktformulare nicht versendet wurden.
Da lag das am Provider. Der wollte bei sich eine Primäre E-Mail Adresse hinterlegt haben (Hosteurope) und zwar nicht für die Kontaktaufnahme im Briefwechsel sondern unter den script Einstellungen:

Hier ändern Sie die E-Mail-Adresse, die von Ihren Skripten als Absender verwendet wird,
wenn keine andere ausgewählt ist. Bitte beachten Sie, dass einige Skripte nicht korrekt funktionieren,
wenn hier keine korrekte Adresse ausgewählt ist.

ohne diese Definition ging garnichts. Eventuell ist das auch hier so.

hm – momentan bekomme ich noch gar keine E-Mail

?

ist jetzt gut 3min her – meine kontaktformulare bekomme ich immer quasi sofort ausgeliefert.

well if you can investigate your menu-item number here is the code:

#menu-item-4424 .avia-menu-text {
    color: #900 !important;
}

but if the menu changes (f.e. an additional menu item is set this could be changed)

you can do it via dashboard go to menu and have a look to the top of the window ( there is an option button) please click it.
now you have the choice to blend in a css class setting by checking the box

now you have the opportunity to give each menu point a different custom class
f.e. red
now you can go to quick css and :

.red {
    color: #900 !important;
}

yes its everything ok but your menu is a “little” wider than that on my example page

you have to change the media query option :

@media only screen and (max-width: 1150px)  {
#top #header_main > .container,#top #header_mai     
etc pp

to the max-width 1650px (this depends on how wide is your navigation and how big is your slogan – so play with it)

and don’t forget to make that one setting more specific to the header else the whole site content is at 100%

https://kriesi.at/support/topic/make-mobile-version-more-user-friendly/#post-464661

webers-testseite.de/enf01

after that you can style the menu which moves beneath the logo

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

and sorry i should have been more specific here :

.responsive #top #wrap_all #header_main .container {
float:none;
max-width:100%;
padding-left:0;
padding-right:0;
width:100%;
margin:0 auto
}

because otherwise all the other containers do the same width with 100%

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

well first of all i used this logo for you:

and than i put in child-theme functions.php the following:

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
	$sub .= "<span class='logo-title'>&ldquo;…the natural route to a healthy complexion <br /> and a younger-looking you…&rdquo;</span>";
	return $sub;
}

I used a custom header hight of 170px and the non shrinking header. This makes no sense for a slogan of that length! I did it with the non sticky header – because for Logo and Slogan and Normal Navigation i found no way to set up the data-scroll-offset for “main” And take the option : “Let logo and menu position adapt to browser window”

Here you can see the result: Guennis Testseite

this is the quick css :

#top .logo,#top .logo a {
overflow:visible
}

#top .logo img {
float:left
}

#top .subtext {
float:left;
font-size:32px;
font-weight:300;
color:#7f0afc;
position:relative;
font-family:"Dancing Script"
}

#top .logo-title {
position:absolute;
line-height:normal;
text-align:center;
left:15px;
opacity:1;
top:30px;
transition:opacity .4s ease-out 0;
white-space:nowrap
}

#header {
display:block;
visibility:visible;
position:relative;
right:0;
left:0;
top:0;
transition:all .4s ease-in-out 0;
width:100%;
padding:0
}

.header_color .inner-container::after {
clear:both;
content:"";
display:table
}

.header_color .inner-container {
padding-bottom:20px;
padding-top:15px;
position:relative;
transition:all .4s ease-in-out 0;
width:100%;
margin:0 auto
}

.header_color .logo,.header_color .main_menu {
display:inline-block;
text-align:left;
vertical-align:middle;
height:auto;
transition: all 0.5s ease-in-out 0s;
}

.header_color .logo {
margin-bottom:0
}

.logo img {
max-height:150px!important;
margin:0 auto
}

.main_menu {
margin-top:-85px;
position:absolute;
right:30px;
top:50%;
transition:all .4s ease-in-out 0
}

.responsive #top #wrap_all .container {
float:none;
max-width:100%;
padding-left:0;
padding-right:0;
width:100%;
margin:0 auto
}

#advanced_menu_toggle,#advanced_menu_hide {
right:20px;
top:20px;
margin:0;
padding:0;
color: #7f0afc;
}

#advanced_menu_toggle:hover, #advanced_menu_hide:hover {
background-color: #7f0afc !important;
color: #fff !important;
}

.responsive .logo img {
margin:0 auto
}

@media only screen and (max-width: 1150px)  {
#top #header_main > .container,#top #header_main > .container .main_menu ul:first-child > li > a {
height:auto!important;
line-height:auto!important
}

#header_main .container {
visibility:visible
}

.av-main-nav li > a {
height:auto!important;
line-height:inherit!important
}

.header_color .logo,.header_color .main_menu {
display:block;
position:relative;
text-align:center;
width:100%;
margin:0 auto 10px;
padding:0
}

.logo,.logo a {
display:inline-block;
height:100%;
position:relative;
width:100%
}

#top .logo img {
    float: none;
    height: 200px;
    margin: 0 auto;
    max-height: 250px !important;
}

.header_color .main_menu {
position:relative;
top:21px;
right:inherit;
margin:0 auto 30px!important
}

#top .subtext {
    font-size: 38px;
}

.av-main-nav-wrap {
float:left;
left:50%;
position:relative
}

.av-main-nav-wrap ul {
padding-top:15px;
position:relative;
right:50%
}

#top .subtext,#top .logo-title {
width:100%;
left:0;
top:0
}
}

@media only screen and (max-width: 770px)  {
.header_color .inner-container {
padding-bottom:30px;
padding-top:0
}

.responsive #top .logo {
display:table;
float:none;
height:auto!important;
width:100%
}

.responsive #top .logo img {
float:none;
display:inline-block
}

#top .subtext {
float:none;
display:block;
font-size:28px;
text-align:center;
top:-70px
}

#top .logo-title {
left:0;
line-height:normal;
position:absolute;
text-align:center;
white-space:normal;
width:100%;
right:50%
}
}

btw. on a shrinking header this might be solved in a different way.

well to work with line-hight might be difficult.

on my installation i got a header hight of 120px and this works for me:

ul.av-main-nav .avia-menu-text {
    bottom: -30px;
    position: relative;
}
ul.sub-menu .avia-menu-text {
    bottom: inherit;
}

you have to play a little bit with that bottom value

Well try to read a little bit about gzip compression.
here you can test your site – and thats why i give you the hint:

http://www.whatsmyip.org/http-compression-test/

you can save about 75% of datatransfer.

but it depends on your hoster which method is the best way to activate
if your hoster supports the way over htaccess file ( normaly if you choose a permalink structure like you have there is a invisible file in root directory called .htaccess (no suffix !))
you can make the file visible for example in filezilla by Server/list hidden data.
The link here gives some instructions: http://www.iceablethemes.com/how-to-speed-up-your-wordpress-site-with-gzip-compression/

hm – i think the way you have it looks very nice.
I wouldn’t change anything.

but if you have a look here :

i managed it this way:
i set the main nav to display none, and used a submenu (there you can choose existing menus like main menu) under the fullscreen slider
i set up the height from 100% to a calc input (the hight of the sub-menu was 52px)

nav.main_menu {
    display: none;
}

.avia-fullscreen-slider.main_color.avia-builder-el-0.el_before_av_submenu.avia-builder-el-first.container_wrap.sidebar_right {
    height: calc(100vh - 52px);
}

#top .av-subnav-menu {
    margin: 0;
    padding-left: 40px;
}

#top .av-submenu-container {
background-color: transparent;
    transition: background-color 0.4s ease 0s;
}

#top .header-scrolled + #main .av-submenu-container {
background-color: #fff
}

the result you can see here: http://webers-testseite.de/enf02/beispiel-seite/
the rest will be styling the menu and vor responsive to set the sub-menu to display none

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

well you want the same background in socket as it is in footer background?
so did you read my answer?

http://webers-testseite.de/enf01/

look to the socket