Function to get the Logo in fixed Header smaller if you´re scroll the site down - Support

Tagged: Fixed Header, header, logo

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

Author

Posts
September 11, 2013 at 7:47 pm #29474

IndikatorDesign
Participant

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

September 11, 2013 at 8:19 pm #140758

IndikatorDesign
Participant

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

September 12, 2013 at 12:03 am #140759
Ismael
Moderator
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
September 12, 2013 at 6:42 am #140760

IndikatorDesign
Participant

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

September 12, 2013 at 7:15 am #140761

IndikatorDesign
Participant

Sorry, I´am using the enfold Theme…

September 12, 2013 at 9:12 am #140762

Ismael
Moderator

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

September 12, 2013 at 12:00 pm #140763

IndikatorDesign
Participant

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

September 12, 2013 at 6:02 pm #140764

IndikatorDesign
Participant

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

September 13, 2013 at 9:46 am #140765

IndikatorDesign
Participant

Hi,

any chance for an answer?

Thanks

September 13, 2013 at 11:35 am #140766
Dude
Participant
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.
September 13, 2013 at 2:04 pm #140767

IndikatorDesign
Participant

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

September 14, 2013 at 3:47 pm #140768

Dude
Participant

Hi!

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

Regards,

Peter

September 15, 2013 at 12:04 pm #140769

IndikatorDesign
Participant

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

September 15, 2013 at 8:43 pm #141261

Ismael
Moderator

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

September 15, 2013 at 10:25 pm #160120

IndikatorDesign
Participant

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

September 17, 2013 at 10:09 am #162164

IndikatorDesign
Participant

Hi,

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

Regards

September 17, 2013 at 2:21 pm #162280

IndikatorDesign
Participant

Fixed Navbar is turned on…

Regards

September 17, 2013 at 8:46 pm #162472
Kriesi
Keymaster
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
September 17, 2013 at 9:23 pm #162502

IndikatorDesign
Participant

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:
https://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

September 17, 2013 at 9:36 pm #162508
Kriesi
Keymaster
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; }
```
September 17, 2013 at 9:59 pm #162518

IndikatorDesign
Participant

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?

September 17, 2013 at 10:11 pm #162525

Kriesi
Keymaster

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…

September 17, 2013 at 10:14 pm #162528

IndikatorDesign
Participant

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

September 17, 2013 at 10:16 pm #162530

IndikatorDesign
Participant

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

September 17, 2013 at 10:17 pm #162533

Kriesi
Keymaster

K, am going to close this one now :)
Author

Posts

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.