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, 6 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, 6 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, 6 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

so lets try togehter:

in child-theme functions.php:

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

on quick css:

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

#top .logo img {
    float: left;
}

#top .subtext {
    float: left;
    position: relative;
}

#top .logo-title {
    color: #000;
    font-size: 20px;
    left: 7px;
    opacity: 1;
    position: absolute;
    top: -15px;
    transition: opacity 0.4s ease-out 0s;
    white-space: nowrap;
}

#top .logo-subtitle {
    color: #aaa;
    left: 60px;
    top: 15px;
}

#top .header-scrolled .logo-title {
    opacity: 0;
}

and for mobile :

@media only screen and (max-width: 770px) {
.responsive #top .logo-title {
    opacity: 0;
}
}

this looks than this way:

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

what is the looking of the table you want? white background with white font color ???

Well never the less there is a rule in enfold that every 2nd tr gets a different font color

.main_color table caption, 
.main_color tr:nth-child(2n), 
.main_color .pricing-table > li:nth-child(2n) {
    color: #919191;
}

your can set your desired font-color by eg. :

.main_color tr:nth-child(2n) {
    color: #000 !important;
}

this is hard to see only from a screenshot. Is there a link for us.
If you don’t like to post it in public use the private option on comments.
But than i could sadly help you.

https://kriesi.at/support/topic/mega-menu-7-column/

often you can use instead :
&#173 and behind the 173 a semicolon

try it

i had now the same problem because i want some headings to break on certain points but on special Headings the ­ does not work

sorry the code above is translated allthough it is set in to code tags so there is that stupid instruction

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

Well you can set the fonts too on Enfold Options Dialogs.
On “General Styling” there are Fonts on the last Tab.
And if you want you can set on “advanced Styling” too font-family and in one setup the text-transform, text-color etc.

edit: :lol “changed” :)

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