Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #608342

    Hello Kriesi-Team,

    right now I use the transparent header option for this site:
    http://www.baeckereibacher.at/

    I wonder if there is a way to center the logo horizontally and vertically on a layer above the slider?
    And i would like to have a similar solution on mobile devices. Right no the logo is shrinking to the upper left corner, I plan to show it horizontally and vertically centered as well.

    Do you have suggestions how to achieve this?

    Cheers,

    #608347

    Hi @nini_bacher ;
    I’m not sure but this may help you for mobil :

    @media only screen and (max-width: 767px){
    .responsive .logo img { margin: auto !important;}
    .responsive .logo a {  display: table-cell !important;}
    }
    
    #608466

    Dear begrafiks,

    thank you for your reply. On mobile devices the logo is now kind of in the middle, but not really, and my question concerning the repositioning for Desktop view is still unanswered. Any more ideas?

    Cheers,

    #608546

    Hi @nini_bacher ;
    I’m really not sure but this may help you for desktop view, as you have a “next section” arrow on your slider you should not go too down.

    .html_header_top.html_logo_center .logo { top: 90% !important;}

    For mobil view you should enlarge the width of the “logo zone” (as you do not display your mobil menu) ther is a place of 20% at the right side :

    @media only screen and (max-width: 767px){
    .responsive #top .logo {  width: 100% !important;}
    .responsive .logo img { margin: auto !important;}
    .responsive .logo a {  display: table-cell !important;}
    }
    • This reply was modified 7 years, 11 months ago by begrafiks.
    #608555

    Hi!


    @nini_bacher
    are you covered by this reply?
    Do u need anything else from us?

    Best regards,
    Basilis

    #608759

    @begrafiks: thank you, the logo is centered for mobil view.


    @Basilis
    , I would like to enlarge the logo for mobil view around 30 %. And display it on a layer above the slider (similar to the desktop view) How could that work?

    Additionally this part of my original request is still open:
    Is there a way to center the logo horizontally and vertically on a layer above the slider (for desktop and mobile view)?

    Cheers,

    #610042

    Hi!

    Please use the below css. For the header use a transparent header in the page options.

    NOTE: The below code is made to work on homepage if you like to use logo over slider on all pages remove “.home” from the below code.

    /*logo size in mobile*/
    @media only screen and (max-width: 767px) {
    .responsive .home .logo img {
        max-height: 125px!important;
    }}
    
    /*center logo*/
    #top.home #wrap_all #header {
        position: absolute!important;
        top: 50%;
        transform: translateY(-50%);
    }

    Cheers!
    Vinay

    #610141

    Hi Vinnie,

    thank you for your reply! This works great for the mobile view – just as intended.

    Is there a way to horizontally and vertically center the logo for the desktop view of the site?

    Cheers,

    #610203

    Hi!

    We are working on your ticket please wait while we update the results here soon.

    Cheers!
    Vinay

    #610204

    Hey!

    The code provided earlier should work for desktop as well .
    you can also use the below code.

    #header {
        top: 50%;
        transform: translateY(-50%);
    }

    Regards,
    Vinay

    #610205

    Hi Vinay,

    thank you for your response. I added the css code, but it dos not do the trick.

    Any other suggestions?

    Cheers,

    #611194

    Hi!

    try to add an !important:

    #header {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    

    Clear browser cache and hard refresh a few times.

    Best regards,
    Andy

    #612116

    Hi Andy,

    thank you for this tip, still it doesn’t work. Do you have any other ideas how to fix this?

    Cheers,

    #613583

    Hi!

    Please use this:

    .html_header_top.html_logo_center .logo {
        top: 120%;
    }

    Adjust the value as needed.

    Best regards,
    Ismael

    #613698

    Hi Ismael,

    thank you! I tried it, but den Logo is still at the same position. Any further ideas how to fix this?

    Cheers,

    #615720

    Hey!

    I checked the site but I can’t find the css code anywhere. Please insert the code at the very top of the Quick CSS field:

    .html_header_top.html_logo_center .logo {
        top: 120% !important;
    }

    Or make sure that it is not wrapped inside the css media queries.

    Best regards,
    Ismael

    #616191

    Dear Ismael,

    thank you for your message, that really helped. It CSS Code was overruled by another adaption and the two seem to had a conflict.

    Cheers,

    #617489

    Hey!

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Cheers!
    Andy

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Logo position, transparent header’ is closed to new replies.