Force logo to break out - Support | Kriesi.at

Tagged: break, logo, overlap

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

Author

Posts
August 14, 2014 at 3:33 am #304126

trossa
Participant

Hey there,

after failing to solve the problem on my own i’d like to ask you for your advice:
I want to force my logo to break out of its container and to overlap the content beneath.
Like this: http://goo.gl/c49oeN
(I just want to change the non-shrinked header, not the shrinked one)

What styles to i have to edit? I couldn’t figure out how to resize the image without resizing the header container aswell.

TIA,
Nik

August 14, 2014 at 7:28 am #304213
Josue
Inactive Moderator
Hey Nik!

Try adding this to the Quick CSS:
```
#top .header-scrolled .logo a, #top .header-scrolled .logo a img{
    max-height: 116px !important;
}
.logo, .logo a{
    overflow: visible !important;    
}
#top .header-scrolled .logo img{
    background: white;
}
```
It would be easier if you share us the website.

Best regards,
Josue
August 14, 2014 at 3:35 pm #304412

trossa
Participant

This reply has been marked as private.

August 14, 2014 at 4:34 pm #304457

Josue
Inactive Moderator

Hey!

You could try decreasing the duration of the transition or use a different timing function:
http://css3.bradshawenterprises.com/transitions/

Cheers!
Josue

August 14, 2014 at 7:41 pm #304559

trossa
Participant

This reply has been marked as private.

August 14, 2014 at 8:40 pm #304583
Josue
Inactive Moderator
Hi Nik!

You’d need to change when does the header gets the “header-scrolled” class, try the following, open js/avia.js and look for this line:
```
if(st < el_height/2)
```
Change it to:
```
if(st > 0)
```
Cheers!
Josue
August 22, 2014 at 7:03 pm #308036

KirinDesign
Participant

Hi! So this does exactly the opposite of what I want. ;) I’d like to have the logo pop out in full size, and when scrolling have it pop back into the header. Right now it’s inside the header in full size (at top), and pops out during scroll. How can I reverse w/o losing responsiveness? (http://fusewm.com)

THANKS!

August 22, 2014 at 8:52 pm #308069
Josue
Inactive Moderator
Hey Veronica!

Remove this code from style.css:
```
#top .header-scrolled .logo a, #top .header-scrolled .logo a img{
    max-height: 116px !important;
}
```
And add this:
```
#header_main .container {
    height: 58px !important;
    line-height: 58px !important;
}
div#main {
    padding-top: 60px !important;
}
```
Best regards,
Josue
August 22, 2014 at 9:53 pm #308082

KirinDesign
Participant

Ok – so I kind of changed my mind (it’s what happens when there’s too many chefs in the kitchen). Let’s keep the mini-breakout and also have it broken out in the same proportions when the header is large (at the top). Does that make sense?

THANKS SO MUCH!

August 22, 2014 at 10:45 pm #308102

Josue
Inactive Moderator

You want to keep it this way on all times?

Regards,
Josue

August 22, 2014 at 10:50 pm #308104

KirinDesign
Participant

Yes, but bigger and smaller respectively with the header.

August 23, 2014 at 12:22 am #308114

Josue
Inactive Moderator

Can you create a mockup of what would you want to achieve?

Best regards,
Josue

August 26, 2014 at 6:50 pm #309472

KirinDesign
Participant

I simply want the logo to remain “popped out” of the header – just in bigger and smaller versions of itself proportionate to the header resizing on the desktop version.

August 26, 2014 at 7:55 pm #309496
Josue
Inactive Moderator
Try with this code:
```
#header_main .container {
    height: 58px !important;
    line-height: 58px !important;
}
div#main {
    padding-top: 60px !important;
}
strong.logo, .logo a, .logo img {
    height: 116px !important;
    max-height: 116px !important;
}
```
Cheers!
Josue
August 27, 2014 at 7:55 pm #310040

KirinDesign
Participant

Well, that made the header tiny always. I want the header to continue being large when one is at the top of the screen, but the logo popped out then as well.

That is, when the header is full size, the logo is twice as big and pops out of the header 50%. Thus, when the header minimizes, the logo also gets smaller to stay proportionately popped out (50%).

I want the header and logo to be equally responsive to scrolling and device usage. I could easy affect the max-height of the logo, but it would never minimize for smaller devices.

August 29, 2014 at 5:17 pm #311003

Dude
Participant

Hi!

Unfortunately this is not possible with css code and would require a time-intensive customization of the javascript code which minimizes the menu. You would need to hire a freelancer if you want to implement such an effect.

Best regards,
Peter
Author

Posts

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

You must be logged in to reply to this topic.