Tagged: 

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • April 5, 2016 at 3:56 pm #608342
    nini_bacher

    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,

    April 5, 2016 at 4:06 pm #608347
    begrafiks

    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;}
}
    April 5, 2016 at 7:09 pm #608466
    nini_bacher

    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,

    April 5, 2016 at 10:34 pm #608546
    begrafiks

    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 8 years, 7 months ago by begrafiks.
    April 5, 2016 at 10:59 pm #608555
    Basilis

    Hi!


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

    Best regards,
    Basilis

    April 6, 2016 at 9:40 am #608759
    nini_bacher

    @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,

    April 8, 2016 at 7:18 am #610042
    Vinay

    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

    April 8, 2016 at 10:30 am #610141
    nini_bacher

    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,

    April 8, 2016 at 12:57 pm #610203
    Vinay

    Hi!

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

    Cheers!
    Vinay

    April 8, 2016 at 1:00 pm #610204
    Vinay

    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

    April 8, 2016 at 1:07 pm #610205
    nini_bacher

    Hi Vinay,

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

    Any other suggestions?

    Cheers,

    April 11, 2016 at 12:48 pm #611194
    Andy

    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

    April 12, 2016 at 7:15 pm #612116
    nini_bacher

    Hi Andy,

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

    Cheers,

    April 14, 2016 at 8:27 am #613583
    Ismael

    Hi!

    Please use this:

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

    Adjust the value as needed.

    Best regards,
    Ismael

    April 14, 2016 at 11:22 am #613698
    nini_bacher

    Hi Ismael,

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

    Cheers,

    April 17, 2016 at 7:36 am #615720
    Ismael

    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

    April 18, 2016 at 9:09 am #616191
    nini_bacher

    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,

    April 19, 2016 at 3:52 pm #617489
    Andy

    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

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