Tagged: , , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 9, 2015 at 8:49 pm #549960
    December 10, 2015 at 2:25 am #550084
    Elliott

    Hey Tobias!

    It seems to look fine on my end. I noticed on mobile you have two logos displaying like you mentioned.

    Your using this in your child theme stylesheet?

    @media only screen and (max-width: 480px) {
.logo a {
    background-image: url(//www.outdoor-inn.de/theme1/oi_mobile_160.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

    If you want to use that one instead then try changing your CSS to this.

    @media only screen and (max-width: 480px) {
.logo img { display: none !important; }
.logo a {
    background-image: url(//www.outdoor-inn.de/theme1/oi_mobile_160.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

    Best regards,
    Elliott

    December 10, 2015 at 10:20 am #550262
    Tobias

    Hi Elliott,
    thanks for the quick response!
    Regarding Your question: before, I used this code:

    
@media only screen and (max-width: 480px) {
.logo img { opacity: 0; }
.logo a { background-image: url(https://www.outdoor-inn.de/theme1/oi_mobile_160.png); background-size: contain; background-repeat: no-repeat; background-position: 0 50%; }}

    By using Your code, now the mobile behavior is working fine.
    No further overlaying (of the mobile logo with standard logo) at pages with Transparency Logo. That’s great!
    But now the logo position at desktop size is right aligned instead of left aligned.
    How ca I set the alignment back to left?

    kind regards!
    Tobias

    December 11, 2015 at 3:22 am #550829
    Elliott

    Hi!

    It’s aligned left. Do you mean you want it to display flush to the left hand side of the screen? In that case you can do that in Dashboard > Enfold > Header > Extra Elements > Let logo and menu position adapt to browser width.

    Cheers!
    Elliott

    December 11, 2015 at 9:39 am #550900
    Tobias

    Hi Elliott,
    yes – the logo is aligned left but now it’s directly beside the menu.
    I would like to show you with some screen-shots.
    In normal, the logo is left aligned to the maximum container width – this is the position I like to get again.
    Please take a look at picture 1.

    If I add your css code, the problem with the overlapping logos at mobile menu is solved, like described above.
    But now, the Desktop version brings the logo position directly beside the menu buttons.
    See picture 2.

    If I activate “Let logo and menu position adapt to browser window” the logo appears out of the maximum container width.
    See picture 3

    Is there a way to get the logo position back as described with picture 1 and also having the mobile behaviour stay corrected?

    regards
    Tobias

    • This reply was modified 9 years ago by Tobias.
    December 13, 2015 at 11:52 pm #551856
    Elliott

    Hi!

    Perhaps you changed the maximum container width value in Dashboard > Enfold > General Layout > Dimensions and forgot about it?

    If you increase the value a bit then it should look like your first screenshot.

    Best regards,
    Elliott

    December 14, 2015 at 12:46 pm #552163
    Tobias

    Hi Elliott,
    settings for container width still are default values
    Maximum Container width: 1130px
    Content | Sidebar Ratio: 73% | 27%

    I try to describe in other words.
    Again – by using the suggested quick css code, the smaller logo for mobile use now is displayed correct. Also on pages with transparency logo at desktop resolution. No further overlaying of main-logo and mobile-logo anymore.

    But with using the css code, the space for the entire content seems to be shrinked a little.
    That’s why main-logo and menu now are close together.
    Also be seen at the 3 text columns.
    Please refer to this comparison:

    Normal desktop layout (without-quick-css-code)

    Shrinked desktop layout (by using the quick-css-code)

    Is there a way to regain the normal desktop layout including the benefits of the smaller logo for mobile?
    kind regards
    Tobias

    December 15, 2015 at 4:22 am #552788
    Elliott

    Hi!

    Hmm, are you sure? In the source code it says the container width is set to 1010px. Are you using a caching plugin?

    Best regards,
    Elliott

    December 15, 2015 at 5:46 pm #553187
    Tobias

    Maybe you would like to take a look by yourself.
    I added the login credentials.
    If quick css code is removed, the normal desktop layout is active, as described in my last screenshots.
    With the code, we have the “shrinked” desktop layout.

    kind regards
    Tobias

    December 18, 2015 at 3:45 am #554796
    Ismael

    Hey!

    There’s a missing bracket in the css media query:

    @media only screen and (max-width: 480px) {
.logo img { display: none !important; }
.logo a {
    background-image: url(//www.outdoor-inn.de/theme1/oi_mobile_160.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 50%;
}
}

    Remove browser cache then reload the page.

    Regards,
    Ismael

    December 18, 2015 at 12:50 pm #554914
    Tobias

    Perfect! Now everything works fine.
    Sorry, I also didn’t see the missed bracket.
    Thank You very much for Your support !!!

    kind regards
    Tobias

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Alternate mobile logo for pages with transparent desktop logo’ is closed to new replies.