Hi Vinay
Thank you for your reply. With the css you provided, It looks perfect in small screen. I tried resizing the browser it looks great

but it still looks like this in iphone. see this screenshot.

and also the text is not clickable, no links , no hover style.

This is all the css used in quick css to get this header widget right. May be it is a bit too much :) May be it needs a bit of clean up. Your help would be highly appreciated.

/* header widget for LARGE screen*/
#header .widget {
  font-size: 34px;
  line-height: 40px;
  position: absolute;
  right: 50px;
  top: 0;
  z-index: 100;
  height: 100%;
  margin: 0;
  padding: 0;
    text-align: right;
}

@media only screen and (min-width: 767px) {
#header .widget{
max-width: 1210px;
left: 0;
right: 0;
margin: 0 auto;

}
}

#header.header-scrolled .widget{
	font-size: 23px;
	line-height: 30px;
}

#header .widget .textwidget, #text-2{
	display: table;
        width: 100%;
	height: 100%;
        float: right;
        z-index: -999 !important;
}
#header .widget .textwidget .custom-text{
	display: table-cell;
	vertical-align: middle;
}

#header .custom-text .icon{
  font-size: 42px;
}

#header.header-scrolled .custom-text .icon{
  font-size: 32px;
}

#header .custom-text .icon span{
	float: none;
	display: inline-block;
	margin-left: 0;
	margin-right: 9px;
}

#header .widget .custom-text p,
#header .widget .custom-text a{
  font-weight: bold;
  color: black;
  margin: 0;
}

/* header widget anchor text hover, it affects social icons too*/
#header .widget .custom-text a:hover{
  color: green;
}

/* header widget for MEDIUM screen*/
@media screen and (max-width: 989px) and (min-width: 767px) {
  #header .widget {
    font-size: 26px;

  }

  #header .custom-text .icon{
    font-size: 40px;
  }

}

/* header widget for SMALL screen*/
@media screen and (max-width: 767px){
  #header .widget {
    font-size: 14px;
    line-height: 24px;
    right: 100px;
    padding: 0;
  }

  #header .custom-text .icon{
    font-size: 26px;
  }

  .responsive .logo,
  .responsive .logo a {
  	height: 200px !important;
  }

  .responsive .logo img{
     height: 180px !important;
  }
}

/*
.content {
  padding-top: 10px;
  padding-bottom: 10px;
}
*/

.main_menu {
  left: 0px;
  right: auto;
  height: 0px;
  display: none;
}

.special_amp {
  font-family: inherit;
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  font-weight: bold;
  color: inherit!important;
}

/*footer image media query*/

@media screen and (max-width: 720px) {
    .textwidget img.avia_image {
        margin-right: 100px;
    }
}

#text-2 {
  right: 100px !important;
   margin-right: 0px !important;
}

/*reduce color box top padding*/

.content {
padding-top: 10px;
padding-bottom: 10px;
}

/* added */

#header .widget .textwidget, #text-2 {
    display: table;
    width: 35%;
    height: 100%;
    float: right;
    display: inline-flex;
padding: 45px 0px 0px 0px;
}

#header.header-scrolled#header .widget .textwidget, #text-2 {
    display: table;
    width: 35%;
    height: 100%;
    float: right;
    display: inline-flex;
padding: 10px 0px 0px 0px;
margin-left: 100px;
}

@media screen and (max-width: 1900px) and (min-width: 989px) {

#text-2 {
  right: 40px !important;
   margin-right: 0px !important;
}

}

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

#text-2 {
  right: 100px !important;
   margin-right: 0px !important;
}

}

@media screen and (max-width: 767px){
  #header .widget {
    font-size: 14px;
    line-height: 24px;
    right: 130px;
    padding: 0;
  }

  #header .custom-text .icon{
    font-size: 26px;
  }
  .responsive .logo img{
    height: 140px !important; 
  }
}

@media screen and (max-width: 480px) {
.responsive .logo img {
    height: 90px !important;
}
.responsive #top #wrap_all .container {
    width: 99%!important;
    max-width: 99%!important;}}

Hi Ismael,

Yes, I am aware of that. That is not the problem. Please see my original message above. The logo resizes automatically, it was was just for test to see what it would look like.
However, we need to have a larger sized logo so that it would be more visible. It will obviously not be 1041x902px but it does need to be slightly larger than the other one 185x67px. And because of it’s square shape and the fact that it needs to be larger that the other one 185x67px it would not fit in the current space. Can you please help with the 3 issues I mentioned in my original message:

”
Hi,

I would like to have a different logo and link on a single page. I added this code in functions.php which seems to work:

add_filter(‘avf_logo’,’av_change_logo’);
function av_change_logo($logo)
{
if(is_page(72344)) {
$logo = “http://www.vuelio.com/uk/wp-content/uploads/2016/06/2016-Blog-Awards-Trophy-Design.png”;
}
return $logo;
}

add_filter(‘avf_logo_link’,’av_change_logo_link’);
function av_change_logo_link($link)
{
if(is_page(72344)){
$link = “http://www.vuelio.com/uk/blog-awards/”;
}
return $link;
}

However the logo on this specific page is larger than the logo on the rest of the site and square shaped so I would like to increase the height of the header containing the logo and the main menu (only on this page) while also keeping the main menu centered vertically within this new space.

This square shaped logo also doesn’t look good when scrolling down with the sticky header active. Is it possible to deactivate the sticky header on this page alone?

Finally, on the same one page, is it possible to deactivate the top bar containing the secondary menu?

I hope you will be able to help with the 3 issues above.

Thanks,
Flavius
“

hi andy
ich logge mich in das backend ein
dann wähle ich seiten aus
dann die seite die ich bearbeiten will
dann bin ich in der bearbeitsungsmaske / advanced layout builder drin
dann ändere ich einen inhakt, text oder bid
hinterher scrolle ich hoch und speichere
der letzte inhalt, das bild mit mit den dankenden mitarbeitern ist nach dem speichern nichtmehr da
es werden die inhalte nur bis ca. zur hälfe angezeigt

die screenshots zeigen die einzelnen steps.
eine vermutung, kann es sein, dass dies mit dem automtishen speichern zu tun hat?

bitte um hilfe. wir haben wirklich probleme mit der seite.

danke

Thanks.

I have removed this code now:
.main_menu .menu ul {
height: 500px;
overflow: hidden;
overflow-y: auto;
}

Now my “About” menu is fine but my languages menu can’t be scrolled.

Thanks

hi rikard,

this is not possible because it is huge work and not possible for me… any automatically change to make tables scrollable on smartphones?

kr dirk

Hi Vinay,

thank you, but it doesn’t seem to work.

could it be conflicting with my other css for sub menu?
here’s all the css currently active on my site

@media only screen and (max-width: 580px) {
.av-submenu-container ul {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; 
}}

::-webkit-scrollbar { 
    display: none; 
}

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    position: fixed!important;
}}

I finally came up with the following pieces of codes and put in in code block. it worked perfectly except for the mobile version:

1) The contact form distance from the top of the page is set for desktop and don’t know how to adjust it in mobile version so whole contact form can be seen in mobile version

2) the contact form goes behind texts and pictures.

Can you solve those issues for me?

Thanks.

Code Block #1

<!-- include Google hosted jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 

	var _scroll = true, _timer = false, _floatbox = $("#contact_form"), _floatbox_opener = $(".contact-opener") ;
	_floatbox.css("right", "-300px"); //initial contact form position
	
	//Contact form Opener button
	_floatbox_opener.click(function(){
		if (_floatbox.hasClass('visiable')){
            _floatbox.animate({"right":"-300px"}, {duration: 300}).removeClass('visiable');
        }else{
           _floatbox.animate({"right":"0px"},  {duration: 300}).addClass('visiable');
        }
	});
	
	//Effect on Scroll

	$(window).scroll(function(){
		if(_scroll){
			_floatbox.animate({"top": "130px"},{duration: 300});
			_scroll = false;
		}
		if(_timer !== false){ clearTimeout(_timer); }           
			_timer = setTimeout(function(){_scroll = true; 
			_floatbox.animate({"top": "110px"},{easing: "linear"}, {duration: 500});}, 400); 
	});

	
	
    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function() { 
        $(this).css('border-color',''); 
        $("#result").slideUp();
    });
	
});
</script>

Code Block #2

<!-- contact form start -->
<div class="floating-form" id="contact_form">
<div class="contact-opener">Open Contact Form</div>
    <div class="floating-form-heading">Request Information</div>
    <div id="contact_results"></div>
    <div id="contact_body">
         [av_contact email=' (Email address hidden if logged out) ' title='' button='Submit' on_send='' sent='Your message has been sent!' link='manually,http://' subject='' autorespond='' captcha='active' hide_labels='aviaTBhide_labels' form_align='' color='']
[av_contact_field label='Name' type='text' options='' multi_select='' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='Last Name' type='text' options='' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' multi_select='' check='is_email' width=''][/av_contact_field]
[av_contact_field label='phone' type='text' options='' check='is_phone' width=''][/av_contact_field]
[av_contact_field label='Your Available Cash Is:' type='select' options=', $200.000-$500.000, $500.000-1.000.000,' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='Your Approx. Networth is:' type='select' options=',$00000,0000' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='What is your timeline to invest?' type='select' options=',60 days, 90 days, 120 days, over 120 days' check='' width=''][/av_contact_field]
[/av_contact]
    </div>
</div>
<!-- contact form end -->

Code Block #3

/* floating box style */
.floating-form {
    max-width: 300px;
    padding: 30px 30px 10px 30px;
    font: 13px Roboto;
    background: #F9F9F9;
    border: 1px solid #ddd;
    right: 10px;
    z-index: 1000;
    position: fixed;
    box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -webkit-box-shadow:  -2px -0px 8px rgba(43, 33, 33, 0.06);
	}
.contact-opener {
    position: absolute;
    left: -88px;
    transform: rotate(-90deg);
    top: 80px;
    z-index: 1000;
    background-color: #a01818;
    padding: 9px;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43);
    cursor: pointer;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -webkit-box-shadow:  -2px -0px 8px rgba(43, 33, 33, 0.06);

}

.floating-form-heading{
font-weight: bold;
color: Black;
font-family: Roboto;
border-bottom: 2px solid #ddd;
margin-bottom: 10px;
font-size: 22px;
padding-bottom: 3px;
}

• This reply was modified 9 years, 8 months ago by afarahani.

Hello,

First of all thanks for your endurance.

It is not about one specific element, it is about scrolling down in general.
When scrolling down I want to make sure that the top of for example the color-section about us is at least once shown at the top of my screen.
Let’s make an example, imagine:
The absolute top of my page is height 1000px. The absolute bottom (bottom of footer) is height 0px. On my Screen I can show 100px. When now a color section begins at height 500px and ends at height 400px and the screen shows from height 395 to 495, there is 5px of another Color-Section shown. This is what annoys me, so I would like that view then to be Auto-corrected to show from height 500px to 400px, so that the whole color section is shown, without any other color-section.

Do you understand now?

Thank You!
Gerke

The problem is not about the height. The Problem is about the Scrolling. When Scrolling down the page, I would like to make sure, that the top of some color sections always is at top of the window when scrolling down.
So this: https://www.dropbox.com/s/wa06lu4dn06dbla/scrolling_problem.PNG?dl=0
should automatically be corrected to this: https://www.dropbox.com/s/r8mdq6usolzje1f/How_it_should_be.PNG?dl=0

So again, yes the color sections do have the correct height, but I would like to make sure that when scrolling down the page the top of a (specific) color section always at least once is at top of the window, so that the whole color Section is at least once shown in fullscreen.

Do you understand what I mean?

Thank you for help,
Gerke

Ok, I found the solution. In order to scroll down the various element of the full-width submenu in a responsive mode I added this CSS
@media only screen and (max-width: 767px) {
.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu {
display: block;
position:relative;
height: auto;
max-height: 200px;
overflow-x: hidden;
}
}

In this way you can se part of the submenu and still part of the page beneath it. Then I worked a little bit on the color change of the text when on hover and it works finely.

Maybe this could be helpful for others! You can check the topic as closed
Thanks

Yes, it is, but if you scroll down only a few milimeters it is not anymore and the next 100% color section automatically will not be 100%, too. Then there will always be some little of the color before/after at top/bottom of the screen visible.
Like here: https://www.dropbox.com/s/wa06lu4dn06dbla/scrolling_problem.PNG?dl=0
So my question is: is there a way to automatically correct that? So that when scrolling down the page a 100% color section is at least one time perfectly fits the screen?

Thank you!
Gerke

thank you, although that didn’t quite work, but i tweaked it and now it works.

ul#menu-plu {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }

Now, i’d like all my full-width submenu to do this, how do i go about this?

Link to Screenshot: https://www.dropbox.com/s/wa06lu4dn06dbla/scrolling_problem.PNG?dl=0

Problem: When Scrolling down, I would like a color section (call it Section A) to automatically scroll that way, that the top of the section is at the upppest thing you can see and not a little bit of the section above. If a little bit of the upper color-section is visible I want the website to automaticall scroll down a little bit until the top of the Section A is at the top of the window.