Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #29474

    Hi there,

    with the following Code I´ve made my Logo bigger to 250px:

    .social_header #header_main .container, .social_header .main_menu ul:first-child > li a {

    height: 250px;

    line-height: 250px;

    }

    This big is fine now. The Header is fixed but if you scroll the site downward, the Logo get smaller to exact 50%, in my case to 125 px.

    I need it a lot smaller in case of scrolling, I think to round about 60px.

    How can I do this?

    Best regards

    #140758

    Oh, there is another problem too. If rising up the pixels on the way I describe, the Header is reached over the Main-title inside the content below the Header. That means that you can´t see the Main-Title and you can´t see the search-function too.

    Any idea to solve this two problems?

    Best regards

    #140759

    Hi,

    You can edit js > avia.js, find this code:

    if(st < el_height/2)
    {
    newH = el_height - st;
    header.removeClass('header-scrolled');
    }
    else
    {
    newH = el_height/2;
    header.addClass('header-scrolled');
    }

    Replace it with

    if(st < el_height/3)
    {
    newH = el_height - st;
    header.removeClass('header-scrolled');
    }
    else
    {
    newH = el_height/3;
    header.addClass('header-scrolled');
    }

    Remove browser cache then reload the page a few times.

    Regards,

    Ismael

    #140760

    Hi,

    this don´t work very well. It´s set to a height of 250px (I need this big for our Logo) and I used el_height/4 and if you scroll down it gets smaller very well till it comes to 188px. Then it makes a directly jump to 62.5px… Any idea why?

    How can I order the MainTitle below the Header as long as the Logo is displayed with 250px? Now the MainTitle is covered with the Header so that you can´t see it, till the Header is reached the 62.5px…

    Regards

    #140761

    Sorry, I´am using the enfold Theme…

    #140762

    Hi,

    Dividing it to 3 should make the logo smaller when you scroll down. Can you give us a link to the website?

    Regards,

    Ismael

    #140763

    Hi,

    it´s in Maintenance Mode. Please try this: http://balance-circle.de/vor-schau-modus

    It can happen that you need to try it for 2 or 3 times…

    Regards,

    Bruno

    #140764

    I´ve put in the following Code:

    CSS

    .social_header #header_main .container, .social_header .main_menu ul:first-child > li a {

    height: 250px;

    line-height: 250px;

    }

    #top .title_container .container {

    margin-top: 134px;

    }

    JS

    if(st < el_height/4)

    {

    newH = el_height – st;

    header.removeClass(‘header-scrolled’);

    }

    else

    {

    newH = el_height/4;

    header.addClass(‘header-scrolled’);

    }

    And I think it looks nice after I changed a few things in the NavBar, but the only negative point is the switch from the Logo from 188px to 62.5px if you´re scrolling down the site.

    If there is a way to handle this, I think it´s nice… Any idea to become a completely smooth switch from the big Logo to the small?

    Thanks

    #140765

    Hi,

    any chance for an answer?

    Thanks

    #140766

    You can try to manually reduce the st value to reach a better scaling effect but you’ll always notice a “jump” at some point. Search for

    var st = win.scrollTop(), newH = 0;

    and try to reduce the st value like

    var st = win.scrollTop() - 100, newH = 0;

    you need to try different values – 100 may not be the best value in your case but – 50 may work better, etc.

    #140767

    Hi, thanks for reply.

    It don´t work. Looks terrible…

    That means really that there is no way to insert a bigger Logo without any problems? That isn´t nice for a Bussiness-Theme. Different Businesses need different solutions…

    One of the reasons I bought this Theme was the Possibility to use a fixed NavBar and now it looks I can´t use it.

    I need a way to insert a Logo with 200px x 200px. What is the solution please?

    Thanks

    #140768

    Hi!

    I marked this thread for Kriesi – maybe he can provide a solution.

    Regards,

    Peter

    #140769

    Ok thanks a lot,

    we have a circular Logo, and our problem is, that we need it with a height of 200px. Otherwise it is to small to see anything.

    But what happens with the fixed NavBar on mobile devices? If I open a Enfold-Website with my iPad, the fixed Navbar will not be smaller during scrolling it down. It stays with the original size?

    Best regards

    Bruno

    #141261

    Hi,

    Can you please activate the fixed header? We need to inspect the site with the fixed header on.

    http://balance-circle.de/vor-schau-modus

    Regards,
    Ismael

    #160120

    Hi,

    the header is activated. I set the following Code for the Logo:

    .social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
    height: 200px;
    line-height: 200px;
    }

    I think 200px height for the Logo is fine…

    I also set the height for the Nav-Items on 30 px, because I added a hover-effect…

    Regards,

    Bruno

    #162164

    Hi,

    have changed it because I need a working NavBar to show it someone. Transform it back in 2 hours.

    Regards

    #162280

    Fixed Navbar is turned on…

    Regards

    #162472

    Hey! The following modifications worked for me:

    CSS:

    .social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
    height: 250px;
    line-height: 250px;
    }
    
    .fixed_header.social_header #main {
    padding-top: 281px;
    }
    

    javascript:

     set_height      = function()
                {
                    var st = win.scrollTop(), newH = 0;
    
                    if(st < el_height - 60)
                    {
                        newH = el_height - st;
                        header.removeClass('header-scrolled');
                    }
                    else
                    {
                        newH = 60;
                        header.addClass('header-scrolled');
                    }
    				
                    elements.css({height: newH + 'px', lineHeight: newH + 'px'});
                }
    

    I used a fixed value for the javascript, that actually makes the calculations for a human person easier :) Replaced the dynamic height with a fixed value of 60px

    #162502

    Hallo Kriesi,

    vielen dank! Das funktioniert am Rechner jetzt absolut top! :)

    Aber (tut mir leid, mag das Wort auch nicht) beim iPad im Landscape Modus bleibt die Leiste einfach mit der angegebenen Höhe stehen, in meinem Fall jetzt bei 200px (reicht für das Logo). Das heißt der Ausschnitt, der letztlich dem User zur Verfügung steht, ist recht minimal.

    Merkwürdigerweise ist es im Portrait-Modus kein Problem, da hier die Navigation wohl umschaltet auf die nicht fixierte Variante.

    Außerdem verschwinden komischerweise beim iPad in beiden Modi die weiteren Menupunkte, nur das Aktuelle ist zu sehen, also das von der Startseite.

    Hast du da eine Idee?

    Ich habe noch einen anderen Topic offen mit der Menuleiste, der evtl. auch deiner Draufsicht bedarf:

    http://www.kriesi.at/support/topic/enfold-different-menus-on-different-sites/#post-162459

    Ansonsten bis auf ein paar Kleinigkeiten in den Details ein echt gutes Theme!

    Viele Grüße
    Bruno

    Hi,

    it works like a charm on my Desktop-Client but there are a few problems on my iPad. In landscape-mode the navbar don´t become smaller during i´am scrolling down. So the user can´t see a lot because the height stays with 200px. Strangely in portrait-mode it works well with the nonfixed navbar.

    Also there is a problem with the menu-items. The only one you can see on iPad is the one from the current site. The others gone away. During the site is loading you can see them for a little moment but you can´t klick on them, after the site finished loading you can´t see them.

    Any idea?

    Thanks a lot

    Best regards
    Bruno

    #162508

    the fixed header disables itself when shown on small screens (based on width)

    if you want to disable it on all mobiles and tablets use:

    .avia_mobile #top #header {position: relative; }
    .avia_mobile #top #main {padding:0 top:-1px; }
    
    #162518

    I think that means that there is no possibility to use the feature with the navbar, that is going smaller during scrolling, on mobile devices?

    #162525

    no, not without further customization. but to tell the truth, I wouldnt recommend it anyways. screen estate on mobile devices is so limited, I wonder why anyone would ever want a fixed header at all on a phone…

    #162528

    You´re right. I don´t want it on a phone, the screen is to small.

    But I think on iPad in landscape it will be nice. But it´s ok. I turn it off… :)

    Thanks a lot

    #162530

    Oh, I found a solution for the Navbar-Items…

    #162533

    K, am going to close this one now :)

Viewing 25 posts - 1 through 25 (of 25 total)

The topic ‘Function to get the Logo in fixed Header smaller if you´re scroll the site down’ is closed to new replies.