make mobile version more user friendly?

yes and i know why its wrong with your input – becaus quotation marks in your text must be replaced by html entities e.g: ”

and by the way with navigation under the logo the scroll setting makes no sense.

perhaps it is possible to get a solution as it is seen on https://theeventscalendar.com/product/wordpress-events-calendar-pro/
they naturaly use enfold too i guess.
And this solution is a nice one to have a normal (not a mobile version) as long as it is possible
On tablets this might be the perfect solution for me too.

btw: i can not see a change on your site – did you have a test install elsewhere ?
i’m only a participant like you – but i often learn better by solving problems from other users.

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%
}
}

this seem to be not the header logo left menu right option !

And you have to look wheather your existing quick css code did not get in to conflict with something

it seem that you have still in it the option on smaller screens with opacity zero

.responsive #top .logo-title {
opacity: 0;
}`

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